import "@testing-library/jest-dom";

import { parseTheme } from "@ax/helpers";
import type { IUserFormState } from "@ax/modules/Sites/SitesList/WelcomeModal";
import DataStep from "@ax/modules/Sites/SitesList/WelcomeModal/DataStep";
import globalTheme from "@ax/themes/theme.json";

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

const defaultForm: IUserFormState = {
	name: "John Doe",
	username: "johndoe",
	position: "Developer",
	company: "Acme",
	timezone: "Europe/Madrid",
};

const renderDataStep = (props = {}) =>
	render(
		<ThemeProvider theme={parseTheme(globalTheme)}>
			<DataStep
				form={defaultForm}
				setForm={jest.fn()}
				onClickNext={jest.fn()}
				onClickBack={jest.fn()}
				croppedImageUrl={null}
				{...props}
			/>
		</ThemeProvider>,
	);

afterEach(cleanup);

describe("DataStep rendering", () => {
	it("should render all three form fields", () => {
		renderDataStep();
		const fields = screen.getAllByTestId("fields-behavior-wrapper");
		expect(fields.length).toEqual(3);
	});

	it("should render Back and Next step buttons", () => {
		renderDataStep();
		expect(screen.getByText("Back")).toBeTruthy();
		expect(screen.getByText("Next step")).toBeTruthy();
	});

	it("should disable Next step button when username is empty", () => {
		renderDataStep({ form: { ...defaultForm, username: "" } });
		const nextButton = screen.getByText("Next step").closest("button");
		expect(nextButton).toBeDisabled();
	});

	it("should enable Next step button when username has value", () => {
		renderDataStep();
		const nextButton = screen.getByText("Next step").closest("button");
		expect(nextButton).not.toBeDisabled();
	});

	it("should disable Next step button when username is only whitespace", () => {
		renderDataStep({ form: { ...defaultForm, username: "   " } });
		const nextButton = screen.getByText("Next step").closest("button");
		expect(nextButton).toBeDisabled();
	});
});

describe("DataStep events", () => {
	it("should call onClickBack when Back button is clicked", () => {
		const onClickBack = jest.fn();
		renderDataStep({ onClickBack });
		fireEvent.click(screen.getByText("Back"));
		expect(onClickBack).toHaveBeenCalledTimes(1);
	});

	it("should call onClickNext when Next step button is clicked", () => {
		const onClickNext = jest.fn();
		renderDataStep({ onClickNext });
		fireEvent.click(screen.getByText("Next step"));
		expect(onClickNext).toHaveBeenCalledTimes(1);
	});

	it("should not call onClickNext when username is empty", () => {
		const onClickNext = jest.fn();
		renderDataStep({ onClickNext, form: { ...defaultForm, username: "" } });
		const nextButton = screen.getByText("Next step").closest("button");
		nextButton && fireEvent.click(nextButton);
		expect(onClickNext).not.toHaveBeenCalled();
	});
});

describe("DataStep position field", () => {
	it("should display position value from form", () => {
		renderDataStep({ form: { ...defaultForm, position: "Senior Developer" } });
		const positionInput = screen.getByDisplayValue("Senior Developer");
		expect(positionInput).toBeTruthy();
	});

	it("should display empty position field when not set", () => {
		renderDataStep({ form: { ...defaultForm, position: "" } });
		// Check that Job title label exists
		expect(screen.getByText("Job title")).toBeTruthy();
	});

	it("should have position field with correct placeholder", () => {
		renderDataStep();
		const positionInput = screen.getByPlaceholderText("Type a job title");
		expect(positionInput).toBeTruthy();
	});
});
