import * as React from "react";

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

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

afterEach(cleanup);

const defaultProps = mock<IReorderArrows>();

describe("ReorderArrows component rendering", () => {
	it("should render the component if is first", () => {
		defaultProps.index = 0;
		defaultProps.listLength = 10;
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ReorderArrows {...defaultProps} />
			</ThemeProvider>,
		);

		const reorderWrapper = screen.getByTestId("reorder-first");
		expect(reorderWrapper).toBeTruthy();
	});

	it("should render the component if is last", () => {
		defaultProps.index = 9;
		defaultProps.listLength = 10;
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ReorderArrows {...defaultProps} />
			</ThemeProvider>,
		);

		const reorderWrapper = screen.getByTestId("reorder-last");
		expect(reorderWrapper).toBeTruthy();
	});

	it("shouldn't render the component", () => {
		defaultProps.index = 9;
		defaultProps.listLength = 0;
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ReorderArrows {...defaultProps} />
			</ThemeProvider>,
		);

		const reorderWrapperLast = screen.queryByTestId("reorder-last");
		const reorderWrapperFirst = screen.queryByTestId("reorder-first");
		expect(reorderWrapperLast).not.toBeTruthy();
		expect(reorderWrapperFirst).not.toBeTruthy();
	});
});

describe("ReorderArrows component events trigger", () => {
	it("should trigger the handleDownClick", () => {
		const handleDownClickMock = defaultProps.handleDownClick as jest.MockedFunction<(value: any) => void>;
		defaultProps.index = 0;
		defaultProps.listLength = 10;

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

		const reorderWrapper = screen.getByTestId("reorder-first");
		expect(reorderWrapper).toBeTruthy();
		const reorderIcon = screen.getByTestId("icon-action-component");
		expect(reorderIcon).toBeTruthy();
		fireEvent.click(reorderIcon);
		expect(handleDownClickMock).toBeCalled();
	});

	it("should trigger the handleUpClick", () => {
		const handleUpClickMock = defaultProps.handleUpClick as jest.MockedFunction<(value: any) => void>;
		defaultProps.index = 9;
		defaultProps.listLength = 10;
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ReorderArrows {...defaultProps} />
			</ThemeProvider>,
		);

		const reorderWrapper = screen.getByTestId("reorder-last");
		expect(reorderWrapper).toBeTruthy();
		const reorderIcon = screen.getByTestId("icon-action-component");
		expect(reorderIcon).toBeTruthy();
		fireEvent.click(reorderIcon);
		expect(handleUpClickMock).toBeCalled();
	});
});
