import * as React from "react";

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

import FieldContainer, { IFieldContainerProps } from "@ax/components/FieldContainer";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const defaultProps = mock<IFieldContainerProps>();

describe("FieldContainer component rendering", () => {
	it("should render the component", () => {
		defaultProps.field = {
			title: "Title",
			type: "ComponentContainer",
			key: "title",
			hideable: true,
			slugTo: "/",
		};
		defaultProps.updateValue = jest.fn();
		defaultProps.selectedContent = { id: 1, component: "BasicCard" };
		defaultProps.objKey = "id";

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

		const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
		expect(fieldsBehaviorWrapper).toBeTruthy();
	});

	it("should render the FieldsBehavior", () => {
		defaultProps.field = {
			title: "Title",
			type: "TextField",
			key: "semTitle",
			hideable: true,
			slugTo: "/",
			whiteList: ["BasicCard", "CollectionCard"],
		};
		defaultProps.updateValue = jest.fn();
		defaultProps.selectedContent = { id: 1 };

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

		const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
		expect(fieldsBehaviorWrapper).toBeTruthy();
	});

	it("should render the HiddenField", () => {
		defaultProps.field = {
			title: "Title",
			type: "TextField",
			key: "semTitle",
			hideable: true,
			slugTo: "/",
		};
		defaultProps.updateValue = jest.fn();
		defaultProps.selectedContent = { id: 1, value: null };
		defaultProps.objKey = "value";

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

		const fieldsBehaviorWrapper = screen.getByTestId("field-single-option");
		expect(fieldsBehaviorWrapper).toBeTruthy();
	});
});