import { describe, it, expect } from "vitest";
import { render } from "@testing-library/react";
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
import type { Block } from "@/features/editor/state/editorStore";

// 폼 관련 블록(formSelect/formCheckbox/formRadio)의 textColorCustom 이
// 프리뷰 렌더러에서 실제 텍스트 color 스타일에 반영되는지 검증한다.

describe("PublicPageRenderer - 폼 텍스트 색상", () => {
  it("formSelect 블록의 textColorCustom 은 셀렉트 텍스트 색상에 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_select_color",
        type: "formSelect",
        props: {
          label: "셀렉트 라벨",
          formFieldName: "category",
          options: [
            { label: "옵션 A", value: "a" },
            { label: "옵션 B", value: "b" },
          ],
          textColorCustom: "#ff0000",
        },
      } as any,
    ];

    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);

    const wrapper = getByTestId("preview-form-select") as HTMLElement;
    const select = wrapper.querySelector("select") as HTMLSelectElement | null;

    expect(select).not.toBeNull();
    expect(select!.style.color).toBe("rgb(255, 0, 0)");
  });

  it("formCheckbox 블록의 textColorCustom 은 옵션 텍스트 색상에 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_checkbox_color",
        type: "formCheckbox",
        props: {
          groupLabel: "체크박스 그룹",
          formFieldName: "features",
          options: [{ label: "옵션 1", value: "opt1" }],
          textColorCustom: "#00ff00",
        },
      } as any,
    ];

    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);

    const optionSpan = getByTestId("preview-form-checkbox-option") as HTMLElement;
    expect(optionSpan.style.color).toBe("rgb(0, 255, 0)");
  });

  it("formRadio 블록의 textColorCustom 은 옵션 텍스트 색상에 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "form_radio_color",
        type: "formRadio",
        props: {
          groupLabel: "라디오 그룹",
          formFieldName: "plan",
          options: [{ label: "플랜 A", value: "a" }],
          textColorCustom: "#0000ff",
        },
      } as any,
    ];

    const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);

    const optionSpan = getByTestId("preview-form-radio-option") as HTMLElement;
    expect(optionSpan.style.color).toBe("rgb(0, 0, 255)");
  });
})