import React from "react";
import "@testing-library/jest-dom";
import PageAnalytics from "@ax/components/Fields/AnalyticsField/PageAnalytics";
import { IAnalytics } from "@ax/types";
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("PageAnalytics component rendering", () => {
	test("should render the component PageAnalytics", () => {
		const props = {
			value: valuesMock,
			template: "BasicTemplate",
			onChange: jest.fn(),
			analytics: analyticsMock,
		};

		const { getByText } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<PageAnalytics {...props} />
			</ThemeProvider>,
		);
		expect(getByText(/based on the page content/i)).toBeInTheDocument();
		expect(getByText(/Select Dimensions Options/i)).toBeInTheDocument();
	});

	test("should render the component PageAnalytics whith group", () => {
		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 valuesMock = {
			contentSelect: "group",
			groupSelect: "grupo",
			dimensionsSelect: ["valores"],
			values: { key: "", value: "" },
		};

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

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

	test("should render the component PageAnalytics null value", () => {
		const valuesMock = {
			contentSelect: "individual",
			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)}>
				<PageAnalytics {...props} />
			</ThemeProvider>,
		);
		expect(getByPlaceholderText(/Type a variable/i)).toBeInTheDocument();
	});

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

		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 } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<PageAnalytics {...props} />
			</ThemeProvider>,
		);
		expect(getAllByText(/Select Dimensions/i)).toHaveLength(2);
	});
});
