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

afterEach(cleanup);

const defaultProps = mock<ITextFieldProps>();

describe("Select component rendering", () => {
	test("should render the component with no prefix and suffix", () => {
		defaultProps.title = "A title";
		defaultProps.value = 10;
		defaultProps.step = 1;
		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;

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

		expect(screen.getByTestId("slider-component")).toBeTruthy();
		expect(screen.getByTestId("bubble-component")).toBeTruthy();
		expect(screen.getByTestId("input-slider-component")).toBeTruthy();
	});

	test("should render the component with prefix and suffix", () => {
		defaultProps.title = "A title";
		// biome-ignore lint/suspicious/noTsIgnore: TODO: fix this
		// @ts-ignore
		defaultProps.value = undefined;
		defaultProps.step = 1;
		defaultProps.prefix = "prefix";
		defaultProps.suffix = "suffix";
		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;

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

		expect(screen.findByText("prefix")).toBeTruthy();
		expect(screen.findByText("suffix")).toBeTruthy();
	});
});

describe("Select component events trigger", () => {
	test("should trigger the handleChange", () => {
		defaultProps.title = "A title";
		defaultProps.value = 10;
		defaultProps.step = 1;
		const onChangeMock = defaultProps.onChange as jest.MockedFunction<(value: number) => void>;

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

		const input = screen.getByTestId("input-slider-component");
		fireEvent.change(input, { target: { value: "20" } });
		expect(onChangeMock).toBeCalledWith(20);
	});
});
