import 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 FloatingPanel, { IFloatingPanelProps } from "@ax/components/FloatingPanel";
import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

describe("FloatingPanel component rendering", () => {
	it("should render the component", () => {
		const defaultProps: IFloatingPanelProps = {
			isOpen: true,
			isOpenedSecond: false,
			children: false,
			title: "title",
			toggleModal: jest.fn(),
			handlePanel: jest.fn(),
			secondary: true,
		};

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

		const FloatingPanelWrapper = screen.getByTestId("floating-panel");
		expect(FloatingPanelWrapper).toBeTruthy();
	});

	it("should render the component with iconAction", () => {
		const defaultProps: IFloatingPanelProps = {
			isOpen: true,
			isOpenedSecond: false,
			children: false,
			title: "title",
			toggleModal: jest.fn(),
			handlePanel: jest.fn(),
			secondary: true,
			closeOnOutsideClick: false,
		};

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

		const floatingPanelWrapper = screen.getByTestId("floating-panel");
		expect(floatingPanelWrapper).toBeTruthy();
		const iconAction = screen.getByTestId("icon-action-component");
		expect(iconAction).toBeTruthy();
	});
});

describe("FloatingPanel component events trigger", () => {
	it("should trigger the handleOnClick", () => {
		const handlePanelMock = jest.fn();
		const toggleModalMock = jest.fn();
		const defaultProps: IFloatingPanelProps = {
			isOpen: true,
			isOpenedSecond: false,
			children: false,
			title: "title",
			toggleModal: toggleModalMock,
			handlePanel: handlePanelMock,
			secondary: true,
			closeOnOutsideClick: false,
		};

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

		const floatingPanelWrapper = screen.getByTestId("floating-panel");
		expect(floatingPanelWrapper).toBeTruthy();
		const iconAction = screen.getByTestId("icon-action-component");
		expect(iconAction).toBeTruthy();
		fireEvent.click(iconAction);
		expect(toggleModalMock).toBeCalled();
		expect(handlePanelMock).toBeCalledWith(false);
	});

	it("should trigger the handleClickOutside and trigger handlePanel", () => {
		const handlePanelMock = jest.fn();
		const toggleModalMock = jest.fn();
		const defaultProps: IFloatingPanelProps = {
			isOpen: true,
			isOpenedSecond: false,
			children: false,
			title: "title",
			toggleModal: toggleModalMock,
			handlePanel: handlePanelMock,
			secondary: true,
			closeOnOutsideClick: true,
		};

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

		const floatingPanelWrapper = screen.getByTestId("floating-panel");
		expect(floatingPanelWrapper).toBeTruthy();
		const iconAction = screen.getByTestId("icon-action-component");
		expect(iconAction).toBeTruthy();

		fireEvent.mouseDown(document);
		expect(toggleModalMock).toBeCalled();
		expect(handlePanelMock).toBeCalledWith(false);
	});

	it("should trigger the handleClickOutside and not trigger handlePanel", () => {
		const handlePanelMock = jest.fn();
		const toggleModalMock = jest.fn();
		const defaultProps: IFloatingPanelProps = {
			isOpen: true,
			isOpenedSecond: false,
			children: false,
			title: "title",
			toggleModal: toggleModalMock,
			handlePanel: handlePanelMock,
			secondary: true,
			closeOnOutsideClick: false,
		};

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

		const floatingPanelWrapper = screen.getByTestId("floating-panel");
		expect(floatingPanelWrapper).toBeTruthy();
		const iconAction = screen.getByTestId("icon-action-component");
		expect(iconAction).toBeTruthy();

		fireEvent.mouseDown(document);
		expect(toggleModalMock).not.toBeCalled();
		expect(handlePanelMock).not.toBeCalled();
	});
});
