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

afterEach(cleanup);

const defaultProps = {
	value: {
		content: "",
		tag: "",
	},
	title: "",
	onChange: jest.fn(),
	options: [
		{
			value: "",
			label: "",
		},
	],
	showAdvanced: false,
	default: {},
};

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

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

		expect(textFieldContainer).toBeTruthy();
	});
	it("should render the component complete", () => {
		const props = {
			value: {
				content: "value1",
				tag: "tagValue",
			},
			title: "Title",
			onChange: jest.fn(),
			options: [
				{
					value: "value1",
					label: "Value 1",
				},
			],
			showAdvanced: true,
			default: {},
		};

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

		const textFieldContainer = screen.getByTestId("text-field-container");
		const textFieldAdvancedWrapper = screen.getByTestId("text-field-advanced-wrapper");
		const contentWrapper = screen.getByTestId("fields-behavior-wrapper");
		const selectComponent = screen.getByTestId("select-component");

		expect(textFieldContainer).toBeTruthy();
		expect(textFieldAdvancedWrapper).toBeTruthy();
		expect(contentWrapper).toBeTruthy();
		expect(selectComponent).toBeTruthy();
	});
});
