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

// PublicPageRenderer 섹션 배경 이미지 TDD
// - SectionBlockProps 의 backgroundImage* 속성이 섹션 wrapper 스타일에 반영되는지 검증한다.

describe("PublicPageRenderer - 섹션 배경 이미지", () => {
  it("backgroundImageSrc/size/position 이 설정된 섹션은 backgroundImage/backgroundSize/backgroundPosition 스타일을 가져야 한다", () => {
    const blocks: Block[] = [
      {
        id: "sec_bg_image",
        type: "section",
        props: {
          background: "default",
          paddingY: "md",
          columns: [{ id: "sec_bg_image_col_1", span: 12 }],
          backgroundImageSrc: "/images/section-bg.png",
          backgroundImageSize: "cover",
          backgroundImagePosition: "top",
          backgroundImageRepeat: "repeat-y",
        },
      } as any,
      {
        id: "sec_bg_text",
        type: "text",
        sectionId: "sec_bg_image",
        columnId: "sec_bg_image_col_1",
        props: {
          text: "섹션 배경 이미지 테스트",
          align: "left",
          size: "base",
        },
      } as any,
    ];

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

    const sectionEl = getByTestId("preview-section") as HTMLElement;
    expect(sectionEl.style.backgroundImage).toContain("/images/section-bg.png");
    expect(sectionEl.style.backgroundSize).toBe("cover");
    expect(sectionEl.style.backgroundPosition).toBe("center top");
    expect(sectionEl.style.backgroundRepeat).toBe("repeat-y");
  });

  it("backgroundImagePositionMode 가 custom 인 섹션은 background-position 에 'X% Y%' 값이 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "sec_bg_image_xy",
        type: "section",
        props: {
          background: "default",
          paddingY: "md",
          columns: [{ id: "sec_bg_image_xy_col_1", span: 12 }],
          backgroundImageSrc: "/images/section-bg-xy.png",
          backgroundImageSize: "contain",
          backgroundImagePositionMode: "custom",
          backgroundImagePositionXPercent: 25,
          backgroundImagePositionYPercent: 80,
        },
      } as any,
      {
        id: "sec_bg_text_xy",
        type: "text",
        sectionId: "sec_bg_image_xy",
        columnId: "sec_bg_image_xy_col_1",
        props: {
          text: "XY 커스텀 위치 텍스트",
          align: "left",
          size: "base",
        },
      } as any,
    ];

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

    const sectionEl = getAllByTestId("preview-section").find(
      (el) => (el as HTMLElement).dataset.sectionId === "sec_bg_image_xy",
    ) as HTMLElement;
    expect(sectionEl.style.backgroundImage).toContain("/images/section-bg-xy.png");
    expect(sectionEl.style.backgroundSize).toBe("contain");
    expect(sectionEl.style.backgroundPosition).toBe("25% 80%");
  });

  it("backgroundVideoSrc 가 설정된 섹션은 프리뷰에서도 배경 비디오 video 태그가 렌더되어야 한다", () => {
    const blocks: Block[] = [
      {
        id: "sec_bg_video",
        type: "section",
        props: {
          background: "default",
          paddingY: "md",
          columns: [{ id: "sec_bg_video_col_1", span: 12 }],
          backgroundVideoSrc: "/videos/section-bg-preview.mp4",
        },
      } as any,
      {
        id: "sec_bg_text_video",
        type: "text",
        sectionId: "sec_bg_video",
        columnId: "sec_bg_video_col_1",
        props: {
          text: "섹션 배경 비디오 테스트",
          align: "left",
          size: "base",
        },
      } as any,
    ];

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

    const sectionEl = getAllByTestId("preview-section").find(
      (el) => (el as HTMLElement).dataset.sectionId === "sec_bg_video",
    ) as HTMLElement;
    expect(sectionEl).toBeTruthy();

    const videoEl = getAllByTestId("preview-section-bg-video")[0] as HTMLVideoElement;
    expect(videoEl).toBeTruthy();
    expect(videoEl.src).toContain("/videos/section-bg-preview.mp4");
    expect(videoEl.autoplay).toBe(true);
    expect(videoEl.loop).toBe(true);
    expect(videoEl.muted).toBe(true);
  });
});