import * as React from "react";

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

import { parseTheme } from "@ax/helpers";
import Form, { IFormProps } from "@ax/components/ConfigPanel/Form";
import globalTheme from "@ax/themes/theme.json";
import { defaultStore } from "./../../../../__mocks__/store/GenericStore";

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

const middlewares: any = [];
const mockStore = configureStore(middlewares);
const initialStore = {
	...defaultStore,
	navigation: {
		currentDefaultsContent: [
			{
				component: "Header",
				type: "header",
				title: "Header name",
				note01: {
					title: "",
					text: "To configure social links go to settings/general/social. To activate search feature go to settings/actionables",
				},
				showTopNavigation: true,
				topNavigationContent: ["showSocialMedia", "showSearchFeature"],
				school: "GRIDDO_BIG",
				primaryLink: {
					component: "Link",
					parentEditorID: 0,
				},
				secondaryLink: {
					component: "Link",
					parentEditorID: 0,
				},
				setAsDefault: false,
				topMenu: null,
				mainMenu: null,
				sticky: true,
				navigationBannerIcon: null,
				navigationBanner: false,
				navigationBannerText: "lorem ipsum",
				navigationBannerLink: {
					component: "Link",
					parentEditorID: 0,
				},
				navigationBannerBGColor: "#50ABFF",
				parentEditorID: null,
				id: 181,
				thumbnail: {
					id: 1005,
					name: "navigation-thumbnail.png",
					title: "Thumbnail for Header name",
					description: "",
					alt: "",
					tags: [],
					url: "https://images.dev.griddo.io/navigation-thumbnail_71",
					thumb: "https://images.dev.griddo.io/w/215/h/161/navigation-thumbnail_71",
					publicId: "thesaurus-dev/navigation-thumbnail_f8d25cc6-daa0-4ea9-b08a-d68670a50a41",
					damId: "navigation-thumbnail_71",
					published: "2022-07-06T14:27:23.553Z",
					size: 4236,
					width: 773,
					height: 92,
					orientation: "L",
					site: 85,
				},
				isDefault: false,
				navigationLanguages: [
					{
						navigationId: 181,
						languageId: 4,
						locale: "en_GB",
						language: "English",
					},
				],
				site: 85,
				language: 4,
				entity: "73c91b2f-caca-4732-be7e-56fc1b640774",
				deleted: false,
			},
		],
	},
	pageEditor: {
		selectedContent: { component: "Page" },
		errors: [{}],
	},
	sites: {
		currentSitePages: [
			{
				editorID: 1,
			},
		],
		themeElements: null,
	},
	app: {
		lang: { locale: "es-ES", id: 0 },
	},
	dataPacks: {
		templates: [],
	},
	menu: {
		savedMenus: null,
	},
};
const store = mockStore(initialStore);

const defaultProps = mock<IFormProps>();

defaultProps.schema = {
	title: "Header",
	component: "Header",
	type: "header",
	configTabs: [
		{
			title: "content",
			fields: [
				{
					title: "Name",
					key: "title",
					type: "TextField",
					mandatory: true,
				},
			],
		},
	],
	schemaType: "module",
};
const restorePageNavigationActionMock = jest.fn();
defaultProps.actions = {
	restorePageNavigationAction: restorePageNavigationActionMock,
};
const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;
const setSelectedTabMocked = defaultProps.setSelectedTab as jest.MockedFunction<(tab: string) => void>;
const setHistoryPushMocked = defaultProps.setHistoryPush as jest.MockedFunction<
	(path: string, isEditor: boolean) => void
>;
defaultProps.selectedTab = "content";
defaultProps.isPage = false;
defaultProps.isGlobal = false;
defaultProps.theme = "default-theme";

describe("Form component rendering", () => {
	it("should render the component", () => {
		defaultProps.isPage = true;
		defaultProps.isGlobal = true;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Form {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);
		expect(screen.getByTestId("form-section")).toBeTruthy();
	});

	it("should render the component with no header warning text", () => {
		defaultProps.isPage = false;
		defaultProps.isGlobal = false;
		defaultProps.header = 0;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Form {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);
		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
		expect(screen.getByTestId("form-section")).toBeTruthy();
	});

	it("should call the function to restore the header", () => {
		defaultProps.header = 0;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Form {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);

		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
		const headerLink = screen.getByTestId("header-link");
		fireEvent.click(headerLink);
		expect(restorePageNavigationActionMock).toBeCalled();
		expect(restorePageNavigationActionMock).toBeCalledWith("header");
	});

	it("should render the component with no footer warning text", () => {
		defaultProps.footer = 0;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Form {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);
		expect(screen.getByText(/This page doesn\'t have a footer. Click/i)).toBeInTheDocument();
		expect(screen.getByTestId("form-section")).toBeTruthy();
	});

	it("should call the function to restore the header", () => {
		defaultProps.header = 0;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Form {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);

		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
		const footerLink = screen.getByTestId("footer-link");
		fireEvent.click(footerLink);
		expect(restorePageNavigationActionMock).toBeCalled();
		expect(restorePageNavigationActionMock).toBeCalledWith("footer");
	});

	it("should render the tabs", () => {
		defaultProps.isPage = true;
		defaultProps.isGlobal = true;

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Form {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);
		expect(screen.getByTestId("form-section")).toBeTruthy();
	});
});
