import React from "react";

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

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

afterEach(cleanup);

const defaultProps = {
	name: "",
	title: "",
	value: "",
	checked: false,
	error: false,
	disabled: false,
	indeterminate: false,
	onChange: jest.fn(),
	icon: "",
};

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

		const checkFieldLabel = screen.getByTestId("check-field-label");
		const checkFieldInput = screen.getByTestId("check-field-input");
		const checkFieldCheckMark = screen.getByTestId("check-field-check-mark");

		expect(checkFieldLabel).toBeTruthy();
		expect(checkFieldInput).toBeTruthy();
		expect(checkFieldCheckMark).toBeTruthy();
	});

	it("should been checked", () => {
		const newProps = {
			name: "",
			title: "",
			value: "",
			checked: true,
			error: false,
			disabled: false,
			indeterminate: false,
			onChange: jest.fn(),
			icon: "",
		};

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

		const checkFieldLabel = screen.getByTestId("check-field-label");
		const checkFieldInput = screen.getByTestId("check-field-input");
		const checkFieldCheckMark = screen.getByTestId<HTMLInputElement>("check-field-check-mark");

		expect(checkFieldLabel).toBeTruthy();
		expect(checkFieldInput).toBeTruthy();
		expect(checkFieldCheckMark).toBeTruthy();
		expect(checkFieldCheckMark.checked).toBe(true);
	});

	it("should change the style if indeterminate is true", () => {
		const newProps = {
			name: "",
			title: "",
			value: "",
			checked: false,
			error: false,
			disabled: false,
			indeterminate: true,
			onChange: jest.fn(),
			icon: "",
		};

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

		const checkFieldLabel = screen.getByTestId("check-field-label");
		const checkFieldInput = screen.getByTestId("check-field-input");
		const checkFieldCheckMark = screen.getByTestId<HTMLInputElement>("check-field-check-mark");

		expect(checkFieldLabel).toBeTruthy();
		expect(checkFieldInput).toBeTruthy();
		expect(checkFieldCheckMark).toBeTruthy();
		expect(checkFieldCheckMark.checked).toBe(false);
		const theme = parseTheme(globalTheme);
		expect(checkFieldCheckMark).toHaveStyle(`border: 2px solid ${theme.colors.interactive01}`);
	});

	it("should render the component with icon", () => {
		const props = {
			name: "",
			title: "",
			value: "",
			checked: false,
			error: false,
			disabled: false,
			indeterminate: false,
			onChange: jest.fn(),
			icon: "icon",
		};

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

		const checkFieldInput = screen.getByTestId("check-field-input");

		expect(checkFieldInput).toBeTruthy();
	});
});

describe("CheckField events", () => {
	it("should call the onchange", () => {
		const onChangeMock = jest.fn();

		const props = {
			name: "name",
			title: "title",
			value: "empty",
			checked: false,
			error: false,
			disabled: false,
			indeterminate: false,
			onChange: onChangeMock,
			icon: "icon",
		};

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

		const checkFieldLabel = screen.getByTestId("check-field-label");
		const checkFieldInput = screen.getByTestId<HTMLInputElement>("check-field-input");

		expect(checkFieldLabel).toBeTruthy();
		expect(checkFieldInput).toBeTruthy();
		fireEvent.change(checkFieldInput, { target: { checked: true, value: "lalala" } });
		expect(checkFieldInput.value).toBe("lalala");
		expect(checkFieldInput.checked).toBe(true);
	});
});
