import * as React from "react";
import TextField from "@ax/components/Fields/TextField";
import { ThemeProvider } from "styled-components";
import { parseTheme } from "@ax/helpers";
import globalTheme from "@ax/themes/theme.json";
import { render, screen, within, cleanup, fireEvent } from "@testing-library/react";

afterEach(cleanup);

const defaultProps = {
	value: "",
	onChange: jest.fn(),
};

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

		const textFieldContainer = screen.getByTestId("text-field-container");
		const inputComponent = screen.getByTestId("input-component");

		expect(textFieldContainer).toBeTruthy();
		expect(inputComponent).toBeTruthy();
	});

	test("should render the component with prefix", () => {
		const props = {
			value: "value",
			onChange: jest.fn(),
			prefix: "prefix",
		};

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

		const textFieldContainer = screen.getByTestId("text-field-container");
		const inputComponent = screen.getByTestId("input-component");
		const prefix = screen.getByTestId("prefix");
		expect(textFieldContainer).toBeTruthy();
		expect(inputComponent).toBeTruthy();
		expect(prefix).toBeTruthy();
	});

	it("should render the component with backgroundIcon", () => {
		const props = {
			value: "value",
			onChange: jest.fn(),
			icon: "icon",
			iconPosition: "in",
		};
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TextField {...props} />
			</ThemeProvider>,
		);

		const textFieldContainer = screen.getByTestId("text-field-container");
		const inputComponent = screen.getByTestId("input-component");
		const backgroundIconComponent = screen.getByTestId("background-icon-component");

		expect(textFieldContainer).toBeTruthy();
		expect(inputComponent).toBeTruthy();
		expect(backgroundIconComponent).toBeTruthy();
	});

	it("should render the component with button", () => {
		const props = {
			value: "value",
			onChange: jest.fn(),
			icon: "icon",
			iconPosition: "out",
		};
		render(
			<ThemeProvider theme={parseTheme(globalTheme)}>
				<TextField {...props} />
			</ThemeProvider>,
		);

		const textFieldContainer = screen.getByTestId("text-field-container");
		const inputComponent = screen.getByTestId("input-component");
		const iconWrapperComponent = screen.getByTestId("icon-wrapper-component");

		expect(textFieldContainer).toBeTruthy();
		expect(inputComponent).toBeTruthy();
		expect(iconWrapperComponent).toBeTruthy();
	});
});

describe("onClick from buttons", () => {
	test("onClickIcon been called in BackgroundIcon", () => {
		const onClickIconMock = jest.fn();
		const props = {
			value: "value",
			onChange: jest.fn(),
			icon: "icon",
			iconPosition: "in",
			onClickIcon: onClickIconMock,
		};

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

		const backgroundIconComponent = screen.getByTestId("background-icon-component");
		expect(backgroundIconComponent).toBeTruthy();

		fireEvent.click(backgroundIconComponent);
		expect(onClickIconMock).toBeCalledTimes(1);
	});

	test("onClickIcon been called in BackgroundIcon", () => {
		const onClickIconMock = jest.fn();
		const props = {
			value: "value",
			onChange: jest.fn(),
			icon: "icon",
			iconPosition: "out",
			onClickIcon: onClickIconMock,
		};

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

		const iconWrapperComponent = screen.getByTestId("icon-wrapper-component");
		expect(iconWrapperComponent).toBeTruthy();
		const iconActionComponent = within(iconWrapperComponent).getByTestId("icon-action-component");
		expect(iconActionComponent).toBeTruthy();
		fireEvent.click(iconActionComponent);
		expect(onClickIconMock).toBeCalledTimes(1);
	});
});
