import React from "react";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import { mock } from "jest-mock-extended";
import configureStore from "redux-mock-store";
import thunk from "redux-thunk";
import { Router } from "react-router-dom";

import history from "@ax/routes/history";
import globalTheme from "@ax/themes/theme.json";
import Integrations, { IIntegrationsProps } from "@ax/modules/Settings/Integrations";
import { render, cleanup, screen, act } from "../../../../../config/jest/test-utils";

afterEach(cleanup);

const defaultProps = mock<IIntegrationsProps>();

describe("Component rendering", () => {
	it("should render the component with integrations list empty", async () => {
		const initialStore = {
			integrations: {
				integrations: [],
				totalItems: 0,
			},
			app: { isLoading: false },
			sites: { currentSiteInfo: { id: 85 } },
			users: {
				currentPermissions: [],
			},
		};

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

		const initialState = { ...initialStore, ...defaultProps };

		await act(async () => {
			render(
				<Router history={history}>
					<ThemeProvider theme={parseTheme(globalTheme)}>
						<Integrations {...initialState} />
					</ThemeProvider>
				</Router>,
				{ store },
			);
		});

		const integrationsMainWrapper = screen.getByTestId("integrations-main-wrapper");

		expect(integrationsMainWrapper).toBeTruthy();
	});

	it("should render the component with items in the list", async () => {
		const initialStore = {
			integrations: {
				integrations: [
					{
						id: 28,
						name: "Chatbot",
						description: "This is the integration for cookies",
						site: 85,
						contentHead: null,
						contentBody: "<script>console.log('Hello')</script>",
						contentBodyPosition: "start",
						contentPresence: {
							presenceType: null,
							relatedPages: null,
						},
						active: false,
						variables: [
							{
								id: 38,
								variableName: "Nuevo1",
								variableKey: "color",
								defaultValue: "#FFFFF",
								multilanguage: null,
							},
							{
								id: 39,
								variableName: "Nuevo3",
								variableKey: "color",
								defaultValue: "#FFFFF",
								multilanguage: null,
							},
						],
					},
					{
						id: 19,
						name: "Service 1",
						description: "This is the integration for Service",
						site: 85,
						contentHead: null,
						contentBody: "<script>console.log('Hello')</script>",
						contentBodyPosition: "start",
						contentPresence: {
							presenceType: "page-specific",
							relatedPages: [3347],
						},
						active: false,
					},
					{
						id: 20,
						name: "Service 2",
						description: "This is the integration for Service",
						site: 85,
						contentHead: null,
						contentBody: "<script>console.log('Hello')</script>",
						contentBodyPosition: "start",
						contentPresence: {
							presenceType: "all",
							relatedPages: null,
						},
						active: false,
					},
					{
						id: 21,
						name: "Service 3",
						description: "This is the integration for Service",
						site: 85,
						contentHead: null,
						contentBody: "<script>console.log('Hello')</script>",
						contentBodyPosition: "start",
						contentPresence: {
							presenceType: "page-specific",
							relatedPages: null,
						},
						active: true,
					},
					{
						id: 22,
						name: "Service 4",
						description: "This is the integration for Service",
						site: 85,
						contentHead: null,
						contentBody: "<script>console.log('Hello')</script>",
						contentBodyPosition: "start",
						contentPresence: {
							presenceType: undefined,
							relatedPages: undefined,
						},
						active: true,
					},
				],
				totalItems: 5,
			},
			app: { isLoading: false },
			sites: { currentSiteInfo: { id: 85 } },
			users: {
				currentPermissions: [],
			},
		};

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

		const initialState = { ...initialStore, ...defaultProps };

		const Component = (
			<Router history={history}>
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<Integrations {...initialState} />
				</ThemeProvider>
			</Router>
		);

		render(Component, { store });

		expect(await screen.findByText("Chatbot")).toBeTruthy();
		expect(screen.getAllByTestId("integration-item-row").length).toBe(5);
	});
});
