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

const valuesMock = {
	contentSelect: "",
	groupSelect: "",
	dimensionsSelect: ["BasicTemplate", "NewsDetail"],
	values: { key: "", value: "" },
};

const analyticsMock = {
	scriptCode: "",
	siteScriptCodeExists: false,
	dimensions: [],
	groups: [],
};

afterEach(cleanup);

describe("StructuredDataAnalytics component rendering", () => {
	test("should render the component StructuredDataAnalytics", () => {
		const props = {
			value: valuesMock,
			template: "BasicTemplate",
			onChange: jest.fn(),
			analytics: analyticsMock,
		};

		const { container } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<StructuredDataAnalytics {...props} />
			</ThemeProvider>,
		);
		expect(container).toBeEmptyDOMElement();
	});

	test("should render the component StructuredDataAnalytics with templateDimensions", () => {
		const analyticsMockFilled = {
			scriptCode: "",
			siteScriptCodeExists: false,
			dimensions: [
				{
					name: "BasicTemplate",
					values: "BasicTemplate",
				},
				{
					name: "NewsDetail",
					values: "NewsDetail",
				},
			],
			groups: [
				{
					name: "grupo",
					dimensions: "BasicTemplate",
					templates: "BasicTemplate",
				},
				{
					name: "grupo2",
					dimensions: "NewsDetail",
					templates: "NewsDetail",
				},
			],
		};

		const props = {
			value: valuesMock,
			template: "BasicTemplate",
			onChange: jest.fn(),
			analytics: analyticsMockFilled,
		};

		const { getAllByText, getByText } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<StructuredDataAnalytics {...props} />
			</ThemeProvider>,
		);
		expect(getAllByText(/Select variable/i)).toHaveLength(3);
		expect(getByText(/Select Dimensions/i)).toBeInTheDocument();
	});

	test("should render the component StructuredDataAnalytics with null value", () => {
		const valuesMock = {
			contentSelect: "",
			groupSelect: "",
			dimensionsSelect: ["valores"],
			values: { key: "", value: "" },
		};

		const analyticsMockFilled = {
			scriptCode: "",
			siteScriptCodeExists: false,
			dimensions: [
				{
					name: "valores",
					values: "null",
				},
			],
			groups: [
				{
					name: "grupo",
					dimensions: "BasicTemplate",
					templates: "BasicTemplate",
				},
				{
					name: "grupo2",
					dimensions: "NewsDetail",
					templates: "NewsDetail",
				},
			],
		};

		const props = {
			value: valuesMock,
			template: "BasicTemplate",
			onChange: jest.fn(),
			analytics: analyticsMockFilled,
		};

		const { getByPlaceholderText } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<StructuredDataAnalytics {...props} />
			</ThemeProvider>,
		);
		expect(getByPlaceholderText(/Type a variable/i)).toBeInTheDocument();
	});
});
