import * as React from "react";

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

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

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

const middlewares: any = [thunk];
const mockStore = configureStore(middlewares);
const updateEditorContentMock = jest.fn();
const initialStore = {
	navigation: {
		selectedContent: { template: "default" },
		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: { component: "Page" },
		errors: [{}],
	},
	sites: {
		currentSitePages: [
			{
				editorID: 1,
			},
		],
		themeElements: null,
	},
	app: {
		lang: { locale: "es-ES", id: 0 },
	},
	dataPacks: {
		templates: [{ id: "default" }],
	},
	menu: {
		savedMenus: null,
	},
	navigationActions: {
		updateEditorContent: updateEditorContentMock,
	},
};
const store = mockStore(initialStore);

const defaultProps = {
	field: {
		title: "Name",
		key: "title",
		type: "TextField",
		mandatory: true,
	},
	schema: {
		title: "Header",
		component: "Header",
		type: "header",
		configTabs: [
			{
				title: "content",
				fields: [
					{
						title: "Name",
						key: "title",
						type: "TextField",
						mandatory: true,
					},
				],
			},
		],
		schemaType: "module",
	},
	isPage: true,
	isGlobal: true,
	selectedTab: "content",
	theme: "default-theme",
};

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

		const textFieldContainer = screen.getByTestId("text-field-container");
		expect(textFieldContainer).toBeTruthy();
	});
});
