import React from "react";
import "@testing-library/jest-dom";
import configureStore from "redux-mock-store";
import { ThemeProvider } from "styled-components";

import { render, cleanup } from "../../../../../config/jest/test-utils";

import AnalyticsField from "@ax/components/Fields/AnalyticsField";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";

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

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

afterEach(cleanup);

const middlewares: any = [];
const mockStore = configureStore(middlewares);

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

		const store = mockStore(initialStore);

		const { getByText } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<AnalyticsField {...initialState} />
			</ThemeProvider>,
			{ store },
		);
		expect(getByText(/Select Dimensions Options/i)).toBeInTheDocument();
	});
	test("should render the component StructuredDataAnalytics", () => {
		const valuesMock = {
			contentSelect: "content",
			groupSelect: "group",
			dimensionsSelect: ["dimensions"],
			values: { key: "a", value: "b" },
		};
		const analyticsMock = {
			scriptCode: "",
			siteScriptCodeExists: false,
			dimensions: [{ name: "dimension", values: "dimensions" }],
			groups: [{ templates: "BasicTemplate", name: "Basic Template", dimensions: "dimension 1" }],
		};
		const initialState = {
			value: valuesMock,
			template: "BasicTemplate",
			onChange: jest.fn(),
			analytics: analyticsMock,
		};
		const initialStore = {
			analytics: analyticsMock,
			pageEditor: {
				template: "BasicTemplate",
			},
		};

		const store = mockStore(initialStore);

		const { getByText } = render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<AnalyticsField {...initialState} />
			</ThemeProvider>,
			{ store },
		);
		expect(getByText(/Add More Dimensions/i)).toBeInTheDocument();
	});
});
