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

import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import RoleItem, { IRoleItemProps } from "./../../../../../../../modules/Users/UserCreate/SiteItem/RolesModal/RoleItem";

const onClickMock = jest.fn();
const onChangeMock = jest.fn();
const defaultProps: IRoleItemProps = {
	role: {
		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: [],
	},
	onChange: onChangeMock,
	onClick: onClickMock,
};

afterEach(() => {
	jest.clearAllMocks();
	cleanup();
});

describe("RoleItem module rendering", () => {
	it("should render the componet with check", async () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<RoleItem {...defaultProps} />
			</ThemeProvider>,
		);

		expect(screen.getByTestId("roles-modal-item")).toBeTruthy();
		expect(screen.getByLabelText(defaultProps.role.name)).toBeTruthy();
	});

	it("should render the componet with check checked", async () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<RoleItem {...defaultProps} isChecked={true} />
			</ThemeProvider>,
		);

		expect(screen.getByTestId("roles-modal-item")).toBeTruthy();
		const check = screen.getByLabelText(defaultProps.role.name);
		expect(check).toBeTruthy();
		expect(check).toBeChecked();
	});

	it("should render the componet without check", async () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<RoleItem {...defaultProps} isReadOnly={true} />
			</ThemeProvider>,
		);

		expect(screen.getByTestId("roles-modal-item")).toBeTruthy();
		expect(screen.queryByLabelText(defaultProps.role.name)).toBeFalsy();
	});

	it("should render the componet selected", async () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<RoleItem {...defaultProps} isSelected={true} />
			</ThemeProvider>,
		);

		const item = screen.getByTestId("roles-modal-item");
		expect(item).toBeTruthy();
		expect(item).toHaveStyle("border: 2px solid #5057ff");
	});
});

describe("RoleItem module events", () => {
	it("should call onClick on title click", async () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<RoleItem {...defaultProps} />
			</ThemeProvider>,
		);

		const titleComponent = screen.getByTestId("roles-modal-item-title");
		expect(titleComponent).toBeTruthy();
		fireEvent.click(titleComponent);
		expect(onClickMock).toBeCalledTimes(1);
	});

	it("should call onChange on check change", async () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<RoleItem {...defaultProps} />
			</ThemeProvider>,
		);

		const check = screen.getByLabelText(defaultProps.role.name);
		expect(check).toBeTruthy();
		fireEvent.click(check);
		expect(onChangeMock).toBeCalledTimes(1);
	});
});
