import * as React from "react";

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

import FieldsBehavior from "@ax/components/FieldsBehavior";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

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

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

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

	it("should render the component with error message", () => {
		const defaultProps = {
			objKey: "subjDocumentUrl",
			fieldType: "TextField",
			innerFields: [],
			field: {
				title: "Document URL",
				type: "TextField",
				key: "subjDocumentUrl",
				placeholder: "https://",
				condition: "url",
			},
			error: true,
			helptext: "ayuda",
			filled: true,
			title: "Cool title",
			type: "TextField",
			mandatory: "true",
			isTitle: true,
			theme: "default-theme",
			whiteList: ["BasicContent", "CardCollection"],
		};

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

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

	it("should render the component with tooltip 'Options'", () => {
		const defaultProps = {
			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",
			advanced: true,
			whiteList: [],
		};

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

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

		const tooltipComponent = screen.getByTestId("tooltip-component");
		const tipComponent = screen.queryByText("Options");
		expect(tooltipComponent).toBeTruthy();
		expect(tipComponent).toBeTruthy();
	});

	it("should render the component with tooltip 'Hide'", () => {
		const defaultProps = {
			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",
			hideable: true,
		};

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

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

		const tooltipComponent = screen.getByTestId("tooltip-component");
		const tipComponent = screen.queryByText("Hide");
		expect(tooltipComponent).toBeTruthy();
		expect(tipComponent).toBeTruthy();
	});
});
