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

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

afterEach(cleanup);

describe("Informative Menu component rendering", () => {
	it("should render the component hidden", () => {
		const defaultProps: IInformativeMenuProps = {
			message: "This is the message",
			icon: "alert",
			actionText: "Got it",
		};

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

		expect(screen.queryByText(defaultProps.message)).toBeFalsy();
	});

	it("should render the component with message on mouse enter", () => {
		const defaultProps: IInformativeMenuProps = {
			message: "This is the message",
			icon: "alert",
			actionText: "Got it",
		};

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

		const iconAction = screen.getByTestId("icon-action-component");
		expect(iconAction).toBeTruthy();
		fireEvent.mouseEnter(iconAction);
		const componentText = screen.getByText(defaultProps.message);
		expect(componentText).toBeTruthy();
		const button = screen.getByText(defaultProps.actionText).closest("button");
		expect(button).toBeTruthy();
	});

	it("should hide the component with message on mouse leave", () => {
		const defaultProps: IInformativeMenuProps = {
			message: "This is the message",
			icon: "alert",
			actionText: "Got it",
		};

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

		const iconAction = screen.getByTestId("icon-action-component");
		expect(iconAction).toBeTruthy();
		fireEvent.mouseEnter(iconAction);
		expect(screen.getByText(defaultProps.message)).toBeTruthy();
		fireEvent.mouseLeave(iconAction);
		expect(screen.queryByText(defaultProps.message)).toBeFalsy();
	});

	it("should hide the component on button click", () => {
		const defaultProps: IInformativeMenuProps = {
			message: "This is the message",
			icon: "alert",
			actionText: "Got it",
		};

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

		const iconAction = screen.getByTestId("icon-action-component");
		expect(iconAction).toBeTruthy();
		fireEvent.mouseEnter(iconAction);
		expect(screen.getByText(defaultProps.message)).toBeTruthy();
		const button = screen.getByText(defaultProps.actionText).closest("button");
		expect(button).toBeTruthy();
		button && fireEvent.click(button);
		expect(screen.queryByText(defaultProps.message)).toBeFalsy();
	});
});
