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

// ImagePropertiesPanel 컨트롤 TDD
// - 카드 배경색(backgroundColorCustom) HEX 인풋 변경 시 updateBlock 이 올바르게 호출되는지

describe("ImagePropertiesPanel", () => {
  const baseProps: ImageBlockProps = {
    src: "/images/example.png",
    alt: "예시 이미지",
    align: "center",
    widthMode: "auto",
    borderRadius: "md",
  };

  afterEach(() => {
    cleanup();
  });

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

    render(
      <ImagePropertiesPanel
        imageProps={{ ...baseProps, backgroundColorCustom: "#111111" }}
        selectedBlockId="image-1"
        updateBlock={updateBlock}
      />,
    );

    const hexInput = screen.getByLabelText("이미지 카드 배경색 HEX");
    fireEvent.change(hexInput, { target: { value: "#112233" } });

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