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

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

import userEvent from "@testing-library/user-event";

afterEach(() => {
	jest.resetAllMocks();
	cleanup();
});
const propActionMock = jest.fn();
const selectItemsMock = jest.fn();
const defaultProps = {
	isScrolling: false,
	checkState: { isAllSelected: false, indeterminate: false },
	actions: [
		{
			icon: "delete",
			text: "delete",
			action: propActionMock,
		},
	],
	selectItems: selectItemsMock,
	totalItems: 1234,
	selectedItems: {
		all: [],
		notPublished: [],
		published: [],
		drafts: [],
	},
};

describe("Browser component rendering", () => {
	it("should render the component", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<BulkSelectionOptions {...defaultProps} />
			</ThemeProvider>,
		);
		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
		expect(bulkHeaderWrapper).toBeTruthy();
	});
	it("should call the action on onclick", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<BulkSelectionOptions {...defaultProps} />
			</ThemeProvider>,
		);
		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
		expect(bulkHeaderWrapper).toBeTruthy();
		const buttonText = screen.getByTestId("button-text");
		expect(buttonText).toBeTruthy();
		fireEvent.click(buttonText);
		expect(propActionMock).toHaveBeenCalled();
	});
	it("should call the action on onchange", async () => {
		const user = userEvent.setup();
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<BulkSelectionOptions {...defaultProps} />
			</ThemeProvider>,
		);
		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
		expect(bulkHeaderWrapper).toBeTruthy();
		const checkFieldInput = screen.getByTestId<HTMLInputElement>("check-field-input");
		expect(checkFieldInput).toBeTruthy();
		await user.click(checkFieldInput);
		expect(selectItemsMock).toHaveBeenCalled();
	});
	it("should mark the check if isAllSelected", () => {
		const defaultPropsCheck = {
			isScrolling: false,
			checkState: { isAllSelected: true, indeterminate: false },
			actions: [
				{
					icon: "delete",
					text: "delete",
					action: propActionMock,
				},
			],
			selectItems: selectItemsMock,
			totalItems: 10,
		};
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<BulkSelectionOptions {...defaultPropsCheck} />
			</ThemeProvider>,
		);
		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
		expect(bulkHeaderWrapper).toBeTruthy();
		const checkFieldCheckMark = screen.getAllByTestId<HTMLInputElement>("check-field-check-mark");
		checkFieldCheckMark.map((item) => {
			expect(item.checked).toBe(true);
		});
	});
	it("should change the style if indeterminate is true", () => {
		const defaultPropsCheck = {
			isScrolling: false,
			checkState: { isAllSelected: false, indeterminate: true },
			actions: [
				{
					icon: "delete",
					text: "delete",
					action: propActionMock,
				},
			],
			selectItems: selectItemsMock,
			totalItems: 10,
		};
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<BulkSelectionOptions {...defaultPropsCheck} />
			</ThemeProvider>,
		);
		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
		expect(bulkHeaderWrapper).toBeTruthy();
		const theme = parseTheme(globalTheme);
		expect(bulkHeaderWrapper).not.toHaveStyle(`border-bottom: 1px solid ${theme.color.uiLine}`);
		const checkFieldCheckMark = screen.getAllByTestId<HTMLInputElement>("check-field-check-mark");
		checkFieldCheckMark.map((item) => {
			expect(item.checked).toBe(false);
			expect(item).toHaveStyle("border: 2px solid #5057FF");
		});
	});
	it("should show the borderBottom whe isScrolling is true", () => {
		const defaultPropsCheck = {
			isScrolling: true,
			checkState: { isAllSelected: true, indeterminate: false },
			actions: [
				{
					icon: "delete",
					text: "delete",
					action: propActionMock,
				},
			],
			selectItems: selectItemsMock,
			totalItems: 10,
		};
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<BulkSelectionOptions {...defaultPropsCheck} />
			</ThemeProvider>,
		);
		const theme = parseTheme(globalTheme);
		const bulkHeaderWrapper = screen.getByTestId("bulk-header-wrapper");
		expect(bulkHeaderWrapper).toBeTruthy();
		expect(bulkHeaderWrapper).toHaveStyle(`border-bottom: 1px solid ${theme.color.uiLine}`);
	});
});
