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

// PublicPageRenderer 이미지 블록 스타일 TDD
// - backgroundColorCustom 카드 배경 적용 여부
// - widthMode=fixed, widthPx 의 em 변환
// - borderRadiusPx 의 em 변환

describe("PublicPageRenderer - 이미지 블록 스타일", () => {
  afterEach(() => {
    cleanup();
  });

  it("image 블록은 backgroundColorCustom 이 설정된 경우에만 wrapper 에 배경색이 적용되어야 한다", () => {
    const blocksWithBg: Block[] = [
      {
        id: "img_with_bg",
        type: "image",
        props: {
          src: "/images/example.png",
          alt: "배경 있는 이미지",
          align: "center",
          widthMode: "auto",
          backgroundColorCustom: "#123456",
        } as any,
      },
    ];

    const { container, rerender } = render(<PublicPageRenderer blocks={blocksWithBg} />);

    const imgWithBg = container.querySelector("img") as HTMLImageElement | null;
    expect(imgWithBg).not.toBeNull();
    const wrapperWithBg = imgWithBg!.parentElement as HTMLElement | null;
    expect(wrapperWithBg).not.toBeNull();
    // JSDOM 은 #123456 을 rgb(18, 52, 86) 형태로 노출한다.
    expect(wrapperWithBg!.style.backgroundColor).toBe("rgb(18, 52, 86)");

    const blocksWithoutBg: Block[] = [
      {
        id: "img_no_bg",
        type: "image",
        props: {
          src: "/images/example2.png",
          alt: "배경 없는 이미지",
          align: "center",
          widthMode: "auto",
        } as any,
      },
    ];

    rerender(<PublicPageRenderer blocks={blocksWithoutBg} />);

    const imgNoBg = container.querySelector("img") as HTMLImageElement | null;
    expect(imgNoBg).not.toBeNull();
    const wrapperNoBg = imgNoBg!.parentElement as HTMLElement | null;
    expect(wrapperNoBg).not.toBeNull();
    expect(
      wrapperNoBg!.style.backgroundColor === "" || wrapperNoBg!.style.backgroundColor === "transparent",
    ).toBe(true);
  });

  it("widthMode 가 fixed 이고 widthPx 가 설정된 경우 img width 는 em 단위로 설정되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "img_fixed_width",
        type: "image",
        props: {
          src: "/images/example.png",
          alt: "고정 너비 이미지",
          align: "center",
          widthMode: "fixed",
          widthPx: 480,
        } as any,
      },
    ];

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

    const img = container.querySelector("img") as HTMLImageElement | null;
    expect(img).not.toBeNull();
    // 480px / 16 = 30em
    expect(img!.style.width).toBe("30em");
  });

  it("borderRadiusPx 가 설정된 경우 img borderRadius 는 em 단위로 설정되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "img_radius",
        type: "image",
        props: {
          src: "/images/example.png",
          alt: "둥근 이미지",
          borderRadiusPx: 32,
        } as any,
      },
    ];

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

    const img = container.querySelector("img") as HTMLImageElement | null;
    expect(img).not.toBeNull();
    // 32px / 16 = 2em
    expect(img!.style.borderRadius).toBe("2em");
  });
});