import * as React from "react";

import { ThemeProvider } from "styled-components";
import { render, screen, cleanup } from "@testing-library/react";
import "@testing-library/jest-dom";

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

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

const defaultProps = {
	goTo: jest.fn(),
	updateValue: jest.fn(),
	deleteError: jest.fn(),
	whiteList: undefined,
	objKey: "title",
	field: {},
	selectedContent: {
		id: 4380,
		entity: "7387163a-969a-4dae-aa41-f7f3b5a1e21d",
		site: 81,
		title: "Page 36",
		slug: "/page-36",
		language: 4,
		author: 2,
		isHome: false,
		canonicalURL: "",
		parent: null,
		component: "Page",
		deleted: false,
		follow: true,
		header: null,
		footer: null,
		isIndexed: true,
		liveStatus: {
			id: 4,
			title: "Offline pending",
			status: "offline-pending",
		},
		locale: null,
		metaDescription: "",
		metaTitle: "Page 1",
		metasAdvanced: "",
		socialTitle: "",
		socialDescription: "",
		socialImage: null,
		template: {},
		url: null,
		workflowStatus: null,
		modified: "2022-12-01T16:37:27.000Z",
		published: "2022-09-27T14:32:13.000Z",
		pageLanguages: [],
		templateId: "BasicTemplate",
		structuredData: null,
		hash: "01e8b056-9769-41f3-aeab-373324b19d34",
		origin: "EDITOR",
		fullUrl: "//cx.dev.griddo.io/pre-griddo/sergio-site/page-36/",
		templateConfig: {},
		editorID: 0,
		parentEditorID: null,
	},
	pages: [],
	actions: {},
	disabled: false,
	readonly: false,
	activatedModules: ["Accordion"],
	isTemplateActivated: true,
	errors: [],
	theme: "griddo-alt-theme",
	moduleCopy: null,
	availableDataPacks: [],
	template: "BasicTemplate",
};

describe("Field component rendering", () => {
	it("should render the component with FieldContainer", () => {
		defaultProps.field = {
			title: "Title",
			type: "TextField",
			key: "title",
		};

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

		// It's loading Field -> FieldContainer with a TextField
		const inputComponent = screen.getByTestId<HTMLInputElement>("input-component");
		expect(inputComponent).toBeTruthy();
	});

	it("should render the component with FieldGroup", () => {
		defaultProps.field = {
			title: "Title",
			type: "FieldGroup",
			key: "title",
		};

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

		// It's loading Field -> FieldGroup with a TextField
		const fieldGroupWrapper = screen.getByTestId("field-group-wrapper");
		expect(fieldGroupWrapper).toBeTruthy();
	});
});
