import * as React from "react";

import { ThemeProvider } from "styled-components";
import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
import { mock } from "jest-mock-extended";
import configureStore from "redux-mock-store";
import "@testing-library/jest-dom";
import thunk from "redux-thunk";

import { parseTheme } from "@ax/helpers";
import NavigationForm, { INavigationFormProps } from "@ax/components/ConfigPanel/NavigationForm";
import globalTheme from "@ax/themes/theme.json";

beforeEach(() => {
	cleanup();
});

const middlewares: any = [thunk];
const mockStore = configureStore(middlewares);

const initialStore = {
	pageEditor: {
		selectedContent: {
			editorID: 0,
			title: "selected content field",
			id: 1,
			component: "module",
		},
		editorContent: {
			module: 0,
			editorID: 0,
			parentEditorID: null,
			isHome: false,
			headerConfig: "{}",
			footerConfig: "{}",
		},
	},
	navigation: {
		currentDefaultsContent: [
			{
				type: "module",
				id: 2,
			},
		],
	},
	dataPacks: {
		configFormData: {
			defaultParent: null,
			indexDefault: true,
			modifiableOnPage: false,
		},
	},
};

const store = mockStore(initialStore);

const defaultProps = mock<INavigationFormProps>();

defaultProps.schema = {
	schemaType: "module",
	displayName: "Header",
	component: "Header",
	type: "header",
	defaultNavigation: true,
	category: "header",
	dataPacks: null,
	configTabs: [
		{
			title: "content",
			fields: [
				{
					title: "Name",
					key: "title",
					type: "TextField",
					mandatory: true,
				},
			],
		},
	],
};
defaultProps.theme = "default-theme";

describe("NavigationForm component rendering", () => {
	it("should render component", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<NavigationForm {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);

		// the text is loading in the header
		const componentWrapper = screen.getByText(/selected content field/i);
		expect(componentWrapper).toBeInTheDocument();

		// the text is loading in the noteField
		const noteText = screen.getByText(/go to Navigation/i);
		expect(noteText).toBeInTheDocument();
	});
});
