import { mock } from "jest-mock-extended";
import configureStore from "redux-mock-store";
import thunk from "redux-thunk";
import { ThemeProvider } from "styled-components";

import "@testing-library/jest-dom";

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

import { cleanup, render, screen } from "../../../../config/jest/test-utils";
import { defaultStore } from "./../../../__mocks__/store/GenericStore";

afterEach(cleanup);

const middlewares: any = [thunk];
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: {},
	},
	sites: {
		currentSitePages: [
			{
				editorID: 1,
			},
		],
	},
	app: {
		lang: { locale: "es-ES", id: 0 },
	},
	dataPacks: {
		templates: [],
		configFormData: {
			defaultParent: null,
			indexDefault: true,
			modifiableOnPage: false,
		},
	},
	menu: {
		savedMenus: null,
	},
};
const store = mockStore(initialStore);

const defaultProps = mock<IStateProps>();
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.setSelectedTab.mockImplementation(jest.fn());
defaultProps.actions = { deleteModule: jest.fn() };
defaultProps.breadcrumb = [
	{
		editorID: 0,
		displayName: "Header",
		component: "Header",
	},
];
defaultProps.selectedParent = null;
defaultProps.activatedModules = ["Accordion", "AddressCollection"];
defaultProps.selectedTab = "content";
defaultProps.isPage = false;
defaultProps.isEditable = true;
defaultProps.theme = "default-theme";

describe("ConfigPanel component rendering", () => {
	it("should render the component", () => {
		defaultProps.isLoading = false;
		defaultProps.isPage = true;

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

		expect(screen.getByTestId("config-panel-wrapper")).toBeTruthy();
		expect(screen.getByTestId("note-field-wrapper")).toBeTruthy();
	});

	it("should render the loading component", () => {
		defaultProps.isLoading = true;

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

		expect(screen.getByTestId("loading-wrapper")).toBeTruthy();
	});

	it("should render the previewForm", () => {
		defaultProps.isLoading = false;
		defaultProps.isPage = true;
		defaultProps.isReadOnly = true;

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

		expect(screen.getByTestId("config-panel-wrapper")).toBeTruthy();
		expect(screen.getByTestId("preview-form-wrapper")).toBeTruthy();
	});

	it("should render the globalPageForm", () => {
		defaultProps.isLoading = false;
		defaultProps.isPage = true;
		defaultProps.isGlobal = true;
		defaultProps.isEditable = false;
		defaultProps.isReadOnly = false;

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

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

		expect(screen.getByTestId("config-panel-wrapper")).toBeTruthy();
		expect(screen.getByTestId("global-page-section")).toBeTruthy();
	});

	it("should render the Form", () => {
		defaultProps.isLoading = false;
		defaultProps.isPage = false;
		defaultProps.isGlobal = true;
		defaultProps.isEditable = false;
		defaultProps.isReadOnly = false;

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

		expect(screen.getByTestId("config-panel-wrapper")).toBeTruthy();
		expect(screen.getByTestId("form-section")).toBeTruthy();
	});
});
