import * as React from "react";

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

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

afterEach(cleanup);

describe("MenuItem component rendering", () => {
	it("should render the component inactive", () => {
		const defaultProps: IMenuItemProps = {
			children: <div>Item</div>,
		};

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

		const subItem = screen.getByTestId("menu-subitem");
		expect(subItem).toBeTruthy();
	});

	it("should render the component active", () => {
		const defaultProps: IMenuItemProps = {
			children: <div>Item</div>,
			active: true,
		};

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

		const subItem = screen.getByTestId("menu-subitem");
		expect(subItem).toBeTruthy();
	});

	it("should render with extendend action visible", () => {
		const defaultProps: IMenuItemProps = {
			children: <div>Item</div>,
			extendedAction: { icon: "delete", action: jest.fn(), onlyOnHover: false },
		};

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

		const subItem = screen.getByTestId("menu-subitem");
		const extendedAction = screen.getByTestId("menu-extended-action");
		expect(subItem).toBeTruthy();
		expect(extendedAction).toBeTruthy();
	});

	it("should render with extendend action not visible", () => {
		const defaultProps: IMenuItemProps = {
			children: <div>Item</div>,
			extendedAction: { icon: "delete", action: jest.fn(), onlyOnHover: true },
		};

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

		const subItem = screen.getByTestId("menu-subitem");
		const extendedAction = screen.getByTestId("menu-extended-action");
		expect(subItem).toBeTruthy();
		expect(extendedAction).not.toBeVisible();
	});

	it("should render with extendend action not visible if onlyOnHover is undefined", () => {
		const defaultProps: IMenuItemProps = {
			children: <div>Item</div>,
			extendedAction: { icon: "delete", action: jest.fn() },
		};

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

		const subItem = screen.getByTestId("menu-subitem");
		const extendedAction = screen.getByTestId("menu-extended-action");
		expect(subItem).toBeTruthy();
		expect(extendedAction).not.toBeVisible();
	});
});

describe("component events", () => {
	test("onClick is been called", () => {
		const onClickMock = jest.fn();
		const defaultProps: IMenuItemProps = {
			children: <div>Item</div>,
			onClick: onClickMock,
		};

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

		const subItem = screen.getByTestId("menu-subitem");
		expect(subItem).toBeTruthy();
		fireEvent.click(subItem);
		expect(onClickMock).toBeCalledTimes(1);
	});

	test("extended action is called", async () => {
		const actionMock = jest.fn();
		const defaultProps: IMenuItemProps = {
			children: <div>Item</div>,
			extendedAction: { icon: "delete", action: actionMock, onlyOnHover: false },
		};

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

		const extendedAction = screen.getByTestId("menu-extended-action");
		const iconActionComponent = screen.getByTestId("icon-action-component");
		expect(extendedAction).toBeTruthy();
		expect(iconActionComponent).toBeTruthy();
		fireEvent.click(iconActionComponent);
		expect(actionMock).toBeCalledTimes(1);
	});
});
