import * as React from "react";

import { ThemeProvider } from "styled-components";
import { render, cleanup, screen, fireEvent } from "@testing-library/react";
import { mock } from "jest-mock-extended";
import "@testing-library/jest-dom";

import { parseTheme } from "@ax/helpers";
import ErrorCenter, { IErrorCenterProps } from "@ax/components/ErrorCenter";
import globalTheme from "@ax/themes/theme.json";
import { IErrorItem } from "@ax/types";

afterEach(cleanup);

const defaultProps = mock<IErrorCenterProps>();
const errorItemProps = mock<IErrorItem>();

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

		const errorText = screen.queryByText("Error Center");
		expect(errorText).toBeTruthy();
	});

	it("should render the component with getErrorItem not showing clickable fields", () => {
		errorItemProps.hasDeactivatedPackage = false;
		errorItemProps.type = "alert";
		errorItemProps.message = "un mensaje";
		// biome-ignore lint/suspicious/noTsIgnore: TODO: fix this
		// @ts-ignore
		errorItemProps.editorID = undefined;
		errorItemProps.component = null;
		errorItemProps.name = "name";
		errorItemProps.tab = "tab";
		// biome-ignore lint/suspicious/noTsIgnore: TODO: fix this
		// @ts-ignore
		errorItemProps.key = undefined;
		errorItemProps.template = false;

		const actionsMock = {
			goToError: jest.fn(),
			goToPackage: jest.fn(),
		};

		defaultProps.errors = [errorItemProps];
		defaultProps.actions = actionsMock;

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

		let errorText = screen.queryByText("Go to package");
		expect(errorText).not.toBeTruthy();
		errorText = screen.queryByText("Go to field");
		expect(errorText).not.toBeTruthy();
	});

	it("should render the component with getErrorItem showing 'Go to package'", () => {
		errorItemProps.hasDeactivatedPackage = true;
		errorItemProps.type = "warning";
		errorItemProps.message = "un mensaje";
		errorItemProps.editorID = 1;
		errorItemProps.component = null;
		errorItemProps.name = "name";
		errorItemProps.key = "key";
		errorItemProps.tab = "tab";
		errorItemProps.template = false;

		const actionsMock = {
			goToError: jest.fn(),
			goToPackage: jest.fn(),
		};

		defaultProps.errors = [errorItemProps];
		defaultProps.actions = actionsMock;

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

		const errorText = screen.queryByText("Go to package");
		expect(errorText).toBeTruthy();
	});

	it("should render the component with getErrorItem showing 'Go to field'", () => {
		errorItemProps.hasDeactivatedPackage = false;
		errorItemProps.type = "alert";
		errorItemProps.message = "un mensaje";
		errorItemProps.editorID = 1;
		errorItemProps.component = null;
		errorItemProps.name = "name";
		errorItemProps.key = "key";
		errorItemProps.tab = "tab";
		errorItemProps.template = false;

		const actionsMock = {
			goToError: jest.fn(),
			goToPackage: jest.fn(),
		};

		defaultProps.errors = [errorItemProps];
		defaultProps.actions = actionsMock;

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

		const errorText = screen.queryByText("Go to field");
		expect(errorText).toBeTruthy();
	});
});

describe("ErrorCenter component trigger actions", () => {
	it("should trigger the onclick with getErrorItem showing 'Go to package'", () => {
		errorItemProps.hasDeactivatedPackage = true;
		errorItemProps.type = "warning";
		errorItemProps.message = "un mensaje";
		errorItemProps.editorID = 1;
		errorItemProps.component = "HeroCard";
		errorItemProps.name = "name";
		errorItemProps.key = "key";
		errorItemProps.tab = "tab";
		errorItemProps.template = false;

		const actionsMock = {
			goToError: jest.fn(),
			goToPackage: jest.fn(),
		};

		defaultProps.errors = [errorItemProps];
		defaultProps.actions = actionsMock;

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

		const errorWrapper = screen.getByTestId("error-center-wrapper");
		expect(errorWrapper).toBeTruthy();
		fireEvent.click(errorWrapper);
		expect(actionsMock.goToPackage).toBeCalled();
	});

	it("should trigger the onclick with getErrorItem showing 'Go to field'", () => {
		errorItemProps.hasDeactivatedPackage = false;
		errorItemProps.type = "alert";
		errorItemProps.message = "un mensaje";
		errorItemProps.editorID = 1;
		errorItemProps.component = "HeroCard";
		errorItemProps.name = "name";
		errorItemProps.key = "key";
		errorItemProps.tab = "tab";
		errorItemProps.template = false;

		const actionsMock = {
			goToError: jest.fn(),
			goToPackage: jest.fn(),
		};

		defaultProps.errors = [errorItemProps];
		defaultProps.actions = actionsMock;

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

		const errorWrapper = screen.getByTestId("error-center-wrapper");
		expect(errorWrapper).toBeTruthy();
		fireEvent.click(errorWrapper);
		expect(actionsMock.goToError).toBeCalled();
	});
});
