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

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

const middlewares: any = [thunk];
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,
			},
		],
		currentSiteInfo: {
			id: 1,
		},
		themeElements: null,
	},
	app: {
		lang: { locale: "es-ES", id: 0 },
	},
	dataPacks: {
		templates: [{ id: "default" }, { id: "BasicTemplate" }],
		activated: [],
	},
	menu: {
		savedMenus: null,
	},
	navigationActions: {
		updateEditorContent: updateEditorContentMock,
	},
	integrations: {
		integrations: [],
		totalItems: 0,
		integrationCopy: null,
	},
	users: {
		currentPermissions: [],
		globalPermissions: [],
		currentUser: {
			company: "",
			dateCreated: null,
			description: "",
			email: "bot@secuoyas.com",
			enabled: true,
			failed: 0,
			id: 4,
			image: null,
			name: "Bot",
			status: "active",
			timezone: null,
			username: "Griddo Bot",
			isSuperAdmin: true,
			roles: [
				{ siteId: "global", roles: [1] },
				{ siteId: "all", roles: [1] },
			],
		},
	},
};

const store = mockStore(initialStore);

const defaultProps = mock<IGlobalPageFormProps>();
const setNotificationActionMock = jest.fn();
defaultProps.actions.setNotificationAction = setNotificationActionMock;

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

		const globalPageSection = screen.getByTestId("global-page-section");
		expect(globalPageSection).toBeTruthy();
	});

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

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

		expect(screen.getByText(/This page doesn\'t have a header. Click/i)).toBeInTheDocument();
	});

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

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

	it("should render the connectedField component", () => {
		defaultProps.selectedTab = "config";
		defaultProps.schema = {
			schemaType: "module",
			type: "Header",
			title: "Header",
			component: "header",
			configTabs: [],
		};

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

		const fieldGroupWrapper = screen.getByTestId("field-group-wrapper");
		expect(fieldGroupWrapper).toBeTruthy();
	});
});

describe("GlobalPageForm component rendering", () => {
	it("should trigger handleClick", () => {
		defaultProps.selectedTab = "content";
		const getGlobalFromLocalPageActionMock = jest.fn();
		const saveCurrentSiteInfoActionMock = jest.fn();
		defaultProps.actions.saveCurrentSiteInfoAction = saveCurrentSiteInfoActionMock;
		defaultProps.actions.getGlobalFromLocalPageAction = getGlobalFromLocalPageActionMock;

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

		const globalPageSection = screen.getByTestId("global-page-section");
		expect(globalPageSection).toBeTruthy();
		const editButton = screen.getByText<HTMLButtonElement>("Edit");
		expect(editButton).toBeTruthy();
		fireEvent.click(editButton);
		expect(getGlobalFromLocalPageActionMock).toBeCalled();
		expect(saveCurrentSiteInfoActionMock).toBeCalled();
	});

	it("should trigger handleRestoreHeader", () => {
		defaultProps.selectedTab = "content";
		defaultProps.header = 0;
		const restorePageNavigationActionMock = jest.fn();
		defaultProps.actions.restorePageNavigationAction = restorePageNavigationActionMock;

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

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

	it("should trigger handleRestoreFooter", () => {
		defaultProps.selectedTab = "content";
		defaultProps.footer = 0;
		const restorePageNavigationActionMock = jest.fn();
		defaultProps.actions.restorePageNavigationAction = restorePageNavigationActionMock;

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

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