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";

// divider 스타일 TDD
// - colorHex 에 따른 라인 색상
// - marginY/marginYPx 에 따른 상하 여백 em 스케일
// - widthMode/widthPx 에 따른 길이 모드

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

describe("PublicPageRenderer - divider 스타일", () => {
  it("colorHex 가 지정되면 구분선 라인에 해당 색상이 적용되어야 한다", () => {
    const blocksWithColor: Block[] = [
      {
        id: "div_color",
        type: "divider",
        props: {
          align: "center",
          thickness: "thin",
          colorHex: "#123456",
        },
      } as any,
    ];

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

    const lineWithColor = getByTestId("preview-divider-line") as HTMLElement;
    // JSDOM 은 #123456 을 rgb(18, 52, 86) 으로 노출한다.
    expect(lineWithColor.style.backgroundColor).toBe("rgb(18, 52, 86)");

    const blocksWithoutColor: Block[] = [
      {
        id: "div_default",
        type: "divider",
        props: {
          align: "center",
          thickness: "thin",
        },
      } as any,
    ];

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

    const lineDefault = getByTestId("preview-divider-line") as HTMLElement;
    // 기본 색상은 #475569 이며, JSDOM 에서는 rgb(71, 85, 105) 로 표시된다.
    expect(lineDefault.style.backgroundColor).toBe("rgb(71, 85, 105)");
  });

  it("marginYPx 이 있으면 divider 컨테이너 상하 여백이 em 스케일로 적용되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "div_margin_px",
        type: "divider",
        props: {
          align: "center",
          thickness: "thin",
          marginYPx: 32,
        },
      } as any,
    ];

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

    const wrapper = getByTestId("preview-divider") as HTMLDivElement;
    // 32px / 16 = 2em
    expect(wrapper.style.marginTop).toBe("2em");
    expect(wrapper.style.marginBottom).toBe("2em");
  });

  it("marginY 토큰만 있을 때도 적절한 px 값을 em 으로 변환해 상하 여백에 적용해야 한다", () => {
    const blocks: Block[] = [
      {
        id: "div_margin_token",
        type: "divider",
        props: {
          align: "center",
          thickness: "thin",
          marginY: "lg", // 24px 로 매핑
        },
      } as any,
    ];

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

    const wrapper = getByTestId("preview-divider") as HTMLDivElement;
    // 24px / 16 = 1.5em
    expect(wrapper.style.marginTop).toBe("1.5em");
    expect(wrapper.style.marginBottom).toBe("1.5em");
  });

  it("widthMode 가 fixed 이고 widthPx 가 있으면 divider 라인의 width 가 pxToEm 으로 변환되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "div_fixed_width",
        type: "divider",
        props: {
          align: "center",
          thickness: "thin",
          widthMode: "fixed",
          widthPx: 480,
        },
      } as any,
    ];

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

    const line = getByTestId("preview-divider-line") as HTMLDivElement;
    // 480px / 16 = 30em
    expect(line.style.width).toBe("30em");
  });
});