import React from "react";
import ConditionalField from "@ax/components/Fields/ConditionalField";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import { mock } from "jest-mock-extended";
import { render, screen, cleanup } from "@testing-library/react";
import FieldsBehavior from "@ax/components/FieldsBehavior";

afterEach(cleanup);

const defaultProps = mock<IConditionalFieldProps>();

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

		const conditionalFieldContent = screen.getByTestId("conditionalFieldContent");

		expect(conditionalFieldContent).toBeTruthy();
	});

	it("should render innerFields", () => {
		const fieldProps = {
			objKey: "subjDocumentUrl",
			fieldType: "TextField",
			innerFields: [],
			field: {
				title: "Document URL",
				type: "TextField",
				key: "subjDocumentUrl",
				placeholder: "https://",
				condition: "url",
			},
			title: "Cool title",
			type: "TextField",
			mandatory: "true",
			isTitle: true,
			theme: "default-theme",
		};

		defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
		defaultProps.value = "url";

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

		expect(screen.getByText("Cool title"));
	});

	it("should not render innerFields", () => {
		const fieldProps = {
			objKey: "subjDocumentUrl",
			fieldType: "TextField",
			innerFields: [],
			field: {
				title: "Document URL",
				type: "TextField",
				key: "subjDocumentUrl",
				placeholder: "https://",
				condition: "url",
			},
			title: "Cool title",
			type: "TextField",
			mandatory: "true",
			isTitle: true,
			theme: "default-theme",
		};

		defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
		defaultProps.value = "video";

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

		expect(screen.queryByText("Cool title")).not.toBeTruthy();
	});
});

interface IConditionalFieldProps {
	value: string | boolean;
	options: any[];
	innerFields: any;
	onChange: (value: any) => void;
}
