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

// 섹션 레이아웃 프리셋/직접 입력이 columns 배열의 span 값을 올바르게 업데이트하는지 검증한다.
describe("SectionPropertiesPanel - layout presets", () => {
  const baseProps: SectionBlockProps = {
    background: "default",
    paddingY: "md",
    columns: [{ id: "col-1", span: 12 }],
    maxWidthMode: "normal",
    gapX: "md",
  };

  it("2열 1/2-1/2 프리셋 선택 시 columns 가 [6,6] 분할로 업데이트된다", () => {
    const updateBlock = vi.fn();

    render(
      <SectionPropertiesPanel
        sectionProps={baseProps}
        selectedBlockId="section-layout-1"
        updateBlock={updateBlock}
      />,
    );

    const select = screen.getByLabelText("섹션 컬럼 레이아웃");

    fireEvent.change(select, { target: { value: "two-equal" } });

    expect(updateBlock).toHaveBeenCalledWith(
      "section-layout-1",
      expect.objectContaining({
        columns: expect.arrayContaining([
          expect.objectContaining({ span: 6 }),
          expect.objectContaining({ span: 6 }),
        ]),
      }),
    );
  });

  it("컬럼 span 직접 입력 시 해당 컬럼 span 값이 업데이트된다", () => {
    const updateBlock = vi.fn();

    render(
      <SectionPropertiesPanel
        sectionProps={{
          ...baseProps,
          columns: [
            { id: "col-1", span: 6 },
            { id: "col-2", span: 6 },
          ],
        }}
        selectedBlockId="section-layout-2"
        updateBlock={updateBlock}
      />,
    );

    const inputs = screen.getAllByLabelText("1열 폭 (1~11)");
    const numberInput = inputs.find((el) => (el as HTMLInputElement).tagName === "INPUT" && (el as HTMLInputElement).type === "number") as HTMLInputElement;

    fireEvent.change(numberInput, { target: { value: "8" } });

    expect(updateBlock).toHaveBeenCalledWith(
      "section-layout-2",
      expect.objectContaining({
        columns: expect.arrayContaining([
          expect.objectContaining({ span: 8 }),
        ]),
      }),
    );
  });
});