import * as React from "react";
import ToggleField, { IToggleFieldProps } from "@ax/components/Fields/ToggleField";
import { ThemeProvider } from "styled-components";
import { render, screen, cleanup, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { mock } from "jest-mock-extended";

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

afterEach(cleanup);

const defaultProps = mock<IToggleFieldProps>();

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

		const toggleFieldWrapper = screen.getByTestId("toggle-field-wrapper");
		expect(toggleFieldWrapper).toBeTruthy();
		const theme = parseTheme(globalTheme);
		expect(toggleFieldWrapper).not.toHaveStyle(`background: ${theme.colors.uiBackground03}`);
		const toggleAuxtext = screen.queryByTestId("toggle-auxtext");
		expect(toggleAuxtext).not.toBeTruthy();
	});

	it("should render input as checked", () => {
		defaultProps.value = true;

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

		const toggleFieldInput = screen.getByTestId<HTMLInputElement>("toggle-field-input");
		expect(toggleFieldInput.checked).toEqual(true);
	});

	it("should render input as disabled", () => {
		defaultProps.disabled = true;

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

		const toggleFieldInput = screen.getByTestId<HTMLInputElement>("toggle-field-input");
		expect(toggleFieldInput.disabled).toEqual(true);
	});

	it("should render input with name", () => {
		defaultProps.name = "This is the name";

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

		const toggleFieldInput = screen.getByTestId<HTMLInputElement>("toggle-field-input");
		expect(toggleFieldInput.name).toEqual("This is the name");
	});

	it("should render the auxText", () => {
		defaultProps.auxText = "This is the new text";

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

		const auxText = screen.getByText("This is the new text");
		expect(auxText).toBeInTheDocument();
	});

	it("should render with the background", () => {
		defaultProps.background = true;

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

		const toggleFieldWrapper = screen.getByTestId<HTMLInputElement>("toggle-field-wrapper");
		expect(toggleFieldWrapper).toBeTruthy();
		const theme = parseTheme(globalTheme);
		expect(toggleFieldWrapper).toHaveStyle(`background: ${theme.colors.uiBackground03}`);
	});
});

describe("onClick events", () => {
	it("should call onChange function with value true", () => {
		defaultProps.value = false;
		defaultProps.onChange = jest.fn();

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

		const toggleFieldInput = screen.getByTestId("toggle-field-input");
		fireEvent.click(toggleFieldInput);
		expect(defaultProps.onChange).toHaveBeenCalledWith(true);
	});

	it("should not call onChange function", () => {
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<ToggleField {...defaultProps} onChange={undefined} />
			</ThemeProvider>,
		);

		const toggleFieldInput = screen.getByTestId("toggle-field-input");
		fireEvent.click(toggleFieldInput);
		expect(defaultProps.onChange).not.toHaveBeenCalled();
	});
});
