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 thunk from "redux-thunk";

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

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

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

const initialStore = {
	pageEditor: {
		selectedContent: {
			editorID: 0,
			title: "Header name azul",
			id: 144,
			component: "header",
		},
		editorContent: {
			editorID: 0,
			parentEditorID: null,
			isHome: false,
			headerConfig: "{}",
			footerConfig: "{}",
		},
	},
	navigation: {
		currentDefaultsContent: [
			{
				component: "Header",
				type: "header",
				title: "Header name azul",
				setAsDefault: true,
				id: 144,
				isDefault: true,
				thumbnail: {
					id: 1255,
					name: "navigation-thumbnail.png",
					title: "Thumbnail for Header name azul",
					description: "",
					alt: "",
					tags: [],
					url: "https://images.dev.griddo.io/navigation-thumbnail_186",
					thumb: "https://images.dev.griddo.io/w/215/h/161/navigation-thumbnail_186",
					publicId: "thesaurus-dev/navigation-thumbnail_f1622a50-f703-41ae-b5ed-6a5b0212bb4b",
					damId: "navigation-thumbnail_186",
					published: "2023-01-10T10:10:55.732Z",
					size: 4365,
					width: 526,
					height: 120,
					orientation: "L",
					site: 81,
				},
				site: 81,
			},
			{
				component: "Header",
				type: "header",
				title: "Secondary Header",
				setAsDefault: false,
				id: 165,
				isDefault: false,
				thumbnail: {
					id: 922,
					name: ".png",
					title: "Thumbnail for Secondary Header",
					description: "",
					alt: "",
					tags: [],
					url: "https://images.dev.griddo.io/navigation-thumbnail_28",
					thumb: "https://images.dev.griddo.io/w/215/h/161/navigation-thumbnail_28",
					publicId: "thesaurus-dev/navigation-thumbnail_f73c78ec-af02-47fb-82aa-0727c44e47e3",
					damId: "navigation-thumbnail_28",
					published: "2022-06-08T14:07:11.022Z",
					size: 3150,
					width: 528,
					height: 92,
					orientation: "L",
					site: 81,
				},
				site: 81,
			},
			{
				component: "Footer",
				type: "footer",
				title: "Footer name",
				setAsDefault: true,
				id: 65,
				isDefault: true,
				site: 81,
				thumbnail: null,
			},
			{
				component: "Footer",
				type: "footer",
				title: "Footer name 2",
				setAsDefault: false,
				id: 83,
				site: 81,
				thumbnail: null,
				isDefault: false,
			},
		],
	},
	dataPacks: {
		configFormData: {
			defaultParent: null,
			indexDefault: true,
			modifiableOnPage: false,
			templates: {},
		},
	},
};

const store = mockStore(initialStore);

const defaultFieldProps = mock<IField>();
const defaultStateProps = mock<IStateProps>();
const defaultDispatchProps = mock<IDispatchProps>();

const defaultProps = { ...defaultFieldProps, ...defaultStateProps, ...defaultDispatchProps };

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

		const componentWrapper = screen.getByText(/Header name azul/i);
		expect(componentWrapper).toBeInTheDocument();
	});

	it("should render SideModal with 1 header options because 1 is selected", () => {
		defaultProps.type = "header";
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Field {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);

		const moreInfo = screen.getByTestId("more-info-button");
		fireEvent.click(moreInfo);
		const listItem = screen.getAllByTestId("action-menu-item");
		expect(listItem).toHaveLength(2);
		fireEvent.click(listItem[0]);
		const sideModalWrapper = screen.getByTestId("side-modal");
		expect(sideModalWrapper).toBeTruthy();
		const sideModalOptions = screen.getAllByTestId("side-modal-option");
		expect(sideModalOptions).toHaveLength(1);
	});

	it("should render SideModal with 2 footer option because none is selected", () => {
		defaultProps.type = "footer";
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Field {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);

		const moreInfo = screen.getByTestId("more-info-button");
		fireEvent.click(moreInfo);
		const listItem = screen.getAllByTestId("action-menu-item");
		expect(listItem).toHaveLength(2);
		fireEvent.click(listItem[0]);
		const sideModalWrapper = screen.getByTestId("side-modal");
		expect(sideModalWrapper).toBeTruthy();
		const sideModalOptions = screen.getAllByTestId("side-modal-option");
		expect(sideModalOptions).toHaveLength(2);
	});

	it("should trigger the handleRemove action", () => {
		defaultProps.type = "header";
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Field {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);

		const moreInfo = screen.getByTestId("more-info-button");
		fireEvent.click(moreInfo);
		const listItem = screen.getAllByTestId("action-menu-item");
		expect(listItem).toHaveLength(2);
		fireEvent.click(listItem[1]);
		expect(store.getActions()).toContainEqual({
			payload: { editorContent: { ...initialStore.pageEditor.editorContent, header: 0 } },
			type: "pageEditor/SET_EDITOR_CONTENT",
		});
	});
});
