import * as React from "react";

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

import { parseTheme } from "@ax/helpers";
import TemplateManager from "@ax/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager";
import globalTheme from "@ax/themes/theme.json";

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

const middlewares: any = [];
const mockStore = configureStore(middlewares);
const updateValueMock = jest.fn();

const defaultProps = {
	template: {
		schemaType: "template",
		displayName: "Basic Template",
		component: "BasicTemplate",
		dataPacks: null,
		type: {
			label: "Static",
			value: "static",
		},
		config: [
			{
				title: "Hero Section",
				type: "TextField",
				maxItems: 1,
				whiteList: ["BasicContent", "CardCollection"],
				key: "heroSection",
				autoComplete: "a",
			},
		],
	},
	updateValue: updateValueMock,
	goTo: jest.fn(),
	objKey: "template",
	pages: [],
	selectedTab: "config",
	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,
		},
	},
	actions: {},
	activatedPacks: [],
	isTemplateActivated: true,
	deleteError: jest.fn(),
	errors: [],
	theme: "griddo-alt-theme",
	moduleCopy: null,
	availableDataPacks: [],
	activatedModules: [],
	lang: 4,
};

const initialStore = {
	dataPacks: {
		activated: [
			{
				id: "ARTICLES",
				title: "Articles",
				category: {
					id: "ARTICLES",
					label: "Articles",
				},
				description: "Allows you to hightlight articles",
				image:
					"https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/data-packs-thumbnails/articles.png",
				templates: [],
				modules: [
					{
						id: "ArticlesDistributor",
						title: "Articles Distributor",
						category: "articlesAndEvents",
						thumbnails: {
							"1x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesDistributor",
							"2x": "https://res.cloudinary.com/thesaurus-cms/image/upload/griddo-components/thumbnails/ArticlesDistributor@2x",
						},
						dataPacks: ["ARTICLES"],
						type: {},
						sectionList: {
							BasicTemplate: ["mainContent"],
						},
					},
				],
				categories: [],
				activated: true,
				config: "config",
			},
		],
		available: [],
		modules: [],
	},
	sites: {
		themeElements: null,
	},
	pageEditor: {
		scrollEditorID: null,
	},
};

const store = mockStore(initialStore);

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

		expect(screen.getByText(/Template Options/i)).toBeInTheDocument();
	});

	it("should trigger the handleUpdate", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TemplateManager {...defaultProps} />
			</ThemeProvider>,
			{ store },
		);

		expect(screen.getByText(/Template Options/i)).toBeInTheDocument();
		expect(screen.getByTestId("input-component")).toBeTruthy();
		fireEvent.change(screen.getByTestId<HTMLInputElement>("input-component"), { target: { value: "test" } });
		expect(updateValueMock).toBeCalled();
	});
});
