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

import { parseTheme } from "@ax/helpers";

import ElementsTooltip, { IElementsTooltipProps } from "@ax/components/ElementsTooltip";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const defaultProps = mock<IElementsTooltipProps>();

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

		const elementsTooltipWrapper = screen.queryByTestId("elements-wrapper");

		expect(elementsTooltipWrapper).toBeNull();
	});

	it("should render the component with one element visible", async () => {
		defaultProps.elements = ["uno", "dos", "tres"];
		defaultProps.colors = { uno: "#fff" };
		defaultProps.rounded = true;

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

		const elementsWrapper = screen.getByTestId("elements-wrapper");
		const element = screen.queryAllByTestId("element");
		const remainingElements = screen.getByTestId("remaining-element");
		const divElement = screen.queryAllByTestId("div-element");

		expect(elementsWrapper).toBeTruthy();
		expect(element).toHaveLength(1);
		expect(remainingElements).toHaveTextContent("+2");
		expect(divElement).toHaveLength(0);

		// Hover to show tooltip
		const user = userEvent.setup();
		await user.hover(remainingElements);

		const divElementAfterHover = screen.queryAllByTestId("div-element");
		const rowElement = screen.queryAllByTestId("row-element");

		expect(divElementAfterHover).toHaveLength(3);
		expect(rowElement).toHaveLength(3);
	});

	it("should render the component with three elements visibles", () => {
		defaultProps.elements = ["uno", "dos", "tres"];
		defaultProps.defaultElements = 3;
		defaultProps.maxChar = 1;

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

		const elementsTooltipWrapper = screen.getByTestId("elements-wrapper");
		const elementTooltip = screen.queryAllByTestId("element");
		const remainingElements = screen.queryByTestId("remaining-element");

		expect(elementsTooltipWrapper).toBeTruthy();
		expect(elementTooltip).toHaveLength(3);
		expect(remainingElements).toBeNull();
	});

	it("should render the component with one row", async () => {
		defaultProps.elements = ["uno", "dos", "tres"];
		defaultProps.defaultElements = 1;
		defaultProps.elementsPerRow = 3;

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

		const elementsWrapper = screen.getByTestId("elements-wrapper");
		const element = screen.queryAllByTestId("element");
		const remainingElements = screen.getByTestId("remaining-element");

		expect(elementsWrapper).toBeTruthy();
		expect(element).toHaveLength(1);
		expect(remainingElements).toHaveTextContent("+2");

		// Hover to show tooltip
		const user = userEvent.setup();
		await user.hover(remainingElements);

		const divElement = screen.queryAllByTestId("div-element");
		const rowElement = screen.queryAllByTestId("row-element");

		expect(divElement).toHaveLength(3);
		expect(rowElement).toHaveLength(1);
	});
});
