import React from "react";

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

import { parseTheme } from "@ax/helpers";

import BulkHeader, { IBulkHeaderProps } from "@ax/modules/Users/Roles/BulkHeader";

import globalTheme from "@ax/themes/theme.json";

afterEach(cleanup);

const defaultProps = mock<IBulkHeaderProps>();
defaultProps.selectedRoles = [];
defaultProps.roles = [
	{
		id: 1,
		name: "Administrator",
		hex: "#C7ECF8",
		description:
			"You can manage all of your site's settings, users and roles. You can create and publish all pages of your site.",
		permissions: { totalPermissions: "78/78", sitePermissions: [], globalPermissions: [] },
		active: true,
		users: [],
	},
	{
		id: 2,
		name: "Constructor",
		hex: "#B5FBFF",
		description:
			"You can edit your website, add pages, modules, modify URLs, menus, colours and themes, html tags. You don't manage users, or manage the site configuration.",
		permissions: { totalPermissions: "49/78", sitePermissions: [], globalPermissions: [] },
		active: true,
		users: [],
	},
	{
		id: 3,
		name: "Editor",
		hex: "#E2EE9F",
		description: "You have permission to view, add and edit site content, such as pages and blocks.",
		permissions: { totalPermissions: "21/78", sitePermissions: [], globalPermissions: [] },
		active: false,
		users: [],
	},
];

describe("BulkHeader component rendering", () => {
	it("should render bulk header", async () => {
		defaultProps.showBulk = true;
		defaultProps.checkState.isAllSelected = true;

		await act(async () => {
			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<BulkHeader {...defaultProps} />
				</ThemeProvider>,
			);
		});
		const bulkOptions = screen.getByTestId("bulk-header-wrapper");
		expect(bulkOptions).toBeTruthy();
	});

	it("should render bulk header options", async () => {
		defaultProps.showBulk = true;
		defaultProps.checkState.isAllSelected = true;

		await act(async () => {
			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<BulkHeader {...defaultProps} />
				</ThemeProvider>,
			);
		});
		const buttonTexts = screen.getAllByTestId("button-text");
		expect(buttonTexts.length).toEqual(1);
	});

	it("should render underline when isScrolling ", async () => {
		defaultProps.showBulk = false;
		defaultProps.isScrolling = true;
		defaultProps.sortedListStatus = { isAscending: false, sortedByTitle: false };

		await act(async () => {
			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<BulkHeader {...defaultProps} />
				</ThemeProvider>,
			);
		});
		const tableHeader = screen.getByTestId("roles-table-header");
		expect(tableHeader).toHaveStyle("border-bottom: 1px solid #DBDDE9");
	});

	it("should render users filter when isSiteView ", async () => {
		defaultProps.showBulk = false;
		defaultProps.sortedListStatus = { isAscending: false, sortedByTitle: false, sortedByUsers: false };
		defaultProps.isSiteView = true;

		await act(async () => {
			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<BulkHeader {...defaultProps} />
				</ThemeProvider>,
			);
		});

		const usersFilter = screen.getByTestId("users-filter-header");
		expect(usersFilter).toBeTruthy();
	});
});

describe("BulkHeader module events", () => {
	it("should call deactivate role on click option", async () => {
		defaultProps.showBulk = true;
		defaultProps.isSiteView = false;
		defaultProps.checkState.isAllSelected = true;
		const activateRolesMock = jest.fn();

		defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
			((active: boolean) => void);

		await act(async () => {
			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<BulkHeader {...defaultProps} />
				</ThemeProvider>,
			);
		});
		const buttonTexts = screen.getAllByTestId("button-text");
		expect(buttonTexts.length).toEqual(1);
		fireEvent.click(buttonTexts[0]);
		expect(activateRolesMock).toHaveBeenCalled();
	});

	it("should call activate role on click option", async () => {
		defaultProps.showBulk = true;
		defaultProps.checkState.isAllSelected = true;
		const activateRolesMock = jest.fn();

		defaultProps.activateRoles = activateRolesMock as CalledWithMock<void, [active: boolean]> &
			((active: boolean) => void);

		await act(async () => {
			render(
				<ThemeProvider theme={parseTheme(globalTheme)}>
					<BulkHeader {...defaultProps} />
				</ThemeProvider>,
			);
		});
		const buttonTexts = screen.getAllByTestId("button-text");
		expect(buttonTexts.length).toEqual(1);
		fireEvent.click(buttonTexts[0]);
		expect(activateRolesMock).toHaveBeenCalled();
	});
});
