import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { TextPropertiesPanel } from "@/app/editor/panels/TextPropertiesPanel";
import { ListPropertiesPanel } from "@/app/editor/panels/ListPropertiesPanel";
import type { Block } from "@/features/editor/state/editorStore";

// Text/List/Form 패널에 추가되는 블록 배경색(backgroundColorCustom) 컨트롤에 대한 최소 TDD

describe("Text/List/Form 패널 - 블록 배경색 컨트롤", () => {
  it("TextPropertiesPanel 에서 배경색 HEX 인풋 변경 시 updateBlock 이 backgroundColorCustom 으로 호출되어야 한다", () => {
    const updateBlock = vi.fn();

    render(
      <TextPropertiesPanel
        textProps={{
          text: "텍스트",
          align: "left",
          size: "base",
        } as any}
        selectedBlockId="text-1"
        updateBlock={updateBlock}
        editingBlockId={null}
        setEditingText={() => {}}
      />,
    );

    const hexInput = screen.getByLabelText("텍스트 블록 배경색 HEX");
    fireEvent.change(hexInput, { target: { value: "#112233" } });

    expect(updateBlock).toHaveBeenCalledWith(
      "text-1",
      expect.objectContaining({ backgroundColorCustom: "#112233" }),
    );
  });

  it("ListPropertiesPanel 에서 배경색 HEX 인풋 변경 시 updateBlock 이 backgroundColorCustom 으로 호출되어야 한다", () => {
    const updateBlock = vi.fn();

    render(
      <ListPropertiesPanel
        listProps={{
          items: ["아이템 1"],
          ordered: false,
          align: "left",
        } as any}
        selectedBlockId="list-1"
        selectedListItemId={null}
        updateBlock={updateBlock}
      />,
    );

    const hexInput = screen.getByLabelText("리스트 배경색 HEX");
    fireEvent.change(hexInput, { target: { value: "#445566" } });

    expect(updateBlock).toHaveBeenCalledWith(
      "list-1",
      expect.objectContaining({ backgroundColorCustom: "#445566" }),
    );
  });
});