import React from "react";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import { mock } from "jest-mock-extended";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";

import MultiCheckSelect, { IMultiCheckSelectProps } from "@ax/components/Fields/MultiCheckSelect";

afterEach(cleanup);

const defaultProps = mock<IMultiCheckSelectProps>();

describe("Component rendering", () => {
	it("should render the component", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<MultiCheckSelect {...defaultProps} />
			</ThemeProvider>,
		);

		const multiCheckSelectContent = screen.getByTestId("multi-check-select-wrapper");

		expect(multiCheckSelectContent).toBeTruthy();
	});
});

describe("onClick events", () => {
	it("should show select when clicking", () => {
		defaultProps.options = [
			{
				name: "all",
				value: "all",
				title: "Select All",
			},
			{
				name: "dimensionTwo",
				value: "dimensionTwo",
				title: "dimensionTwo",
			},
		];
		defaultProps.value = [];
		defaultProps.selectAllOption = "all";
		defaultProps.source = "TheSource";

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

		const field = screen.getByTestId("field");
		fireEvent.click(field);
		expect(screen.getByText("dimensionTwo")).toBeTruthy();
	});
});
