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 Header, { IHeaderProps } from "@ax/components/ConfigPanel/Header";
import globalTheme from "@ax/themes/theme.json";

window.scrollTo = jest.fn();

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

afterAll(() => {
	jest.clearAllMocks();
});

const middlewares: any = [];
const mockStore = configureStore(middlewares);
const updateEditorContentMock = jest.fn();
const initialStore = {
	pageEditor: {
		selectedContent: {
			title: {
				component: "Page",
				templateType: "default",
			},
			template: {
				type: "template",
				templateType: "BasicTemplate",
				heroSection: {
					component: "Section",
					name: "Hero Section",
					modules: [],
					sectionPosition: 1,
					editorID: 2,
					parentEditorID: 1,
					key: "heroSection",
				},
				editorID: 1,
				parentEditorID: 0,
			},
		},
		errors: [{}],
	},
	sites: {
		currentSitePages: [
			{
				editorID: 1,
			},
		],
	},
	app: {
		lang: { locale: "es-ES", id: 0 },
	},
	dataPacks: {
		templates: [{ id: "default" }, { id: "BasicTemplate" }],
		activated: [],
	},
	menu: {
		savedMenus: null,
	},
	navigationActions: {
		updateEditorContent: updateEditorContentMock,
	},
};

const store = mockStore(initialStore);

const defaultProps = mock<IHeaderProps>();
defaultProps.actions = {
	duplicateModuleAction: jest.fn(),
	deleteModuleAction: jest.fn(),
	copyModuleAction: jest.fn(),
};
const setSelectedContentMock = defaultProps.setSelectedContent as jest.MockedFunction<(editorID: number) => void>;

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

defaultProps.breadcrumb = [
	{
		editorID: 0,
		component: "TextField",
		displayName: "Texto",
	},
];

defaultProps.activatedModules = ["TextField"];

defaultProps.headerRef = { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>;
const setHeaderHeightMock = defaultProps.setHeaderHeight as jest.MockedFunction<(height: number) => void>;

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

		const headerConfigWrapper = screen.getByTestId("header-config-wrapper");
		expect(headerConfigWrapper).toBeTruthy();
		expect(screen.getByText(/Texto/i)).toBeInTheDocument();
	});

	it("should render the actions menu when clicking the more info button", () => {
		defaultProps.selectedParent = [];

		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Header {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);
		expect(screen.getByTestId("action-menu-wrapper")).toBeTruthy();
		const moreInfo = screen.getByTestId("more-info-button");
		fireEvent.click(moreInfo);
		const listItem = screen.getAllByTestId("action-menu-item");
		expect(listItem).toHaveLength(3);
	});

	it("should trigger the duplicate action", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<Header {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);
		expect(screen.getByTestId("action-menu-wrapper")).toBeTruthy();
		const moreInfo = screen.getByTestId("more-info-button");
		fireEvent.click(moreInfo);
		const listItem = screen.getAllByTestId("action-menu-item");
		expect(listItem).toHaveLength(3);
		fireEvent.click(listItem[0]);
		expect(setSelectedContentMock).toBeCalled();
	});
});
