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

import { parseTheme } from "@ax/helpers";
import CategoryCell, { ICategoryCellProps } from "@ax/components/CategoryCell";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const defaultProps = mock<ICategoryCellProps>();
const addCategoryColorsMock = defaultProps.addCategoryColors as jest.MockedFunction<(cats: string[]) => void>;

describe("CategoryCell component rendering", () => {
	it("should render the component with no elements", () => {
		defaultProps.categoryColors = {};
		defaultProps.categories = false;

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

		expect(screen.queryByTestId("elements-wrapper")).not.toBeTruthy();
	});

	it("should render the component with one element and no remaining element", () => {
		defaultProps.categoryColors = {
			Hogwarts: "#FFE695",
		};
		defaultProps.categories = ["Hogwarts"];

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

		expect(addCategoryColorsMock).toBeCalled();
		expect(screen.getByTestId("elements-wrapper")).toBeTruthy();
		expect(screen.queryByTestId("remaining-element")).not.toBeTruthy();
	});

	it("should render the component with two remaining elements", async () => {
		defaultProps.categoryColors = {
			Hogwarts: "#FFE695",
			Test: "#FFE695",
		};
		defaultProps.categories = ["Hogwarts", "Test"];

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

		expect(addCategoryColorsMock).toBeCalled();
		expect(screen.getByTestId("elements-wrapper")).toBeTruthy();
		const remainingElement = screen.getByTestId("remaining-element");
		expect(remainingElement).toBeTruthy();

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

		expect(screen.getAllByTestId("div-element")).toHaveLength(2);
	});
});
