import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { PropertySliderField } from "@/features/editor/components/PropertySliderField";
import { ColorPickerField } from "@/features/editor/components/ColorPickerField";

// 슬라이더 필드가 라벨과 슬라이더, 입력 박스를 렌더링하고 onChange를 호출하는지 테스트

describe("PropertySliderField", () => {
  it("라벨과 슬라이더, 텍스트 입력을 렌더링한다", () => {
    const handleChange = vi.fn();

    render(
      <PropertySliderField
        label="글자 크기"
        ariaLabelSlider="글자 크기 슬라이더"
        ariaLabelInput="글자 크기 커스텀"
        value={16}
        min={10}
        max={72}
        step={1}
        onChange={handleChange}
      />,
    );

    expect(screen.getByText("글자 크기")).toBeInTheDocument();
    expect(screen.getByLabelText("글자 크기 슬라이더")).toBeInTheDocument();
    expect(screen.getByLabelText("글자 크기 커스텀")).toBeInTheDocument();
  });

  it("슬라이더 변경 시 onChange가 호출된다", () => {
    const handleChange = vi.fn();

    render(
      <PropertySliderField
        label="줄 간격"
        ariaLabelSlider="줄 간격 슬라이더"
        ariaLabelInput="줄 간격 커스텀"
        value={1.5}
        min={0.5}
        max={3}
        step={0.1}
        onChange={handleChange}
      />,
    );

    const slider = screen.getByLabelText("줄 간격 슬라이더") as HTMLInputElement;
    fireEvent.change(slider, { target: { value: "2" } });

    expect(handleChange).toHaveBeenCalledWith(2);
  });
});

// 컬러 피커 필드가 컬러 인풋과 텍스트 입력, 팔레트 버튼을 렌더링하고 상호작용 되는지 테스트

describe("ColorPickerField", () => {
  it("HEX 인풋과 컬러 인풋을 렌더링한다", () => {
    const handleChange = vi.fn();

    render(
      <ColorPickerField
        label="텍스트 색상"
        ariaLabelColorInput="텍스트 색상 피커"
        ariaLabelHexInput="텍스트 색상 HEX"
        value="#ffffff"
        onChange={handleChange}
        palette={[{ id: "default", label: "기본", color: "#e5e7eb" }]}
      />,
    );

    expect(screen.getByText("텍스트 색상")).toBeInTheDocument();
    expect(screen.getByLabelText("텍스트 색상 피커")).toBeInTheDocument();
    expect(screen.getByLabelText("텍스트 색상 HEX")).toBeInTheDocument();
  });

  it("컬러 인풋 변경 시 onChange가 호출된다", () => {
    const handleChange = vi.fn();

    render(
      <ColorPickerField
        label="텍스트 색상"
        ariaLabelColorInput="텍스트 색상 피커"
        ariaLabelHexInput="텍스트 색상 HEX"
        value="#ffffff"
        onChange={handleChange}
        palette={[{ id: "default", label: "기본", color: "#e5e7eb" }]}
      />,
    );

    const colorInput = screen.getByLabelText("텍스트 색상 피커") as HTMLInputElement;
    fireEvent.change(colorInput, { target: { value: "#000000" } });

    expect(handleChange).toHaveBeenCalledWith("#000000");
  });
});