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

describe("PropertiesSidebar HELP 튜토리얼 모달", () => {
  afterEach(() => {
    cleanup();
  });

  const createTextBlock = (): Block => ({
    id: "text-1",
    type: "text",
    props: {
      text: "도움말 테스트",
      align: "left",
      size: "base",
    } as any,
    sectionId: null,
    columnId: null,
  });

  const defaultProps = (blocks: Block[], selectedBlockId: string | null) => ({
    blocks,
    selectedBlockId,
    selectedListItemId: null,
    updateBlock: vi.fn(),
    removeBlock: vi.fn(),
    duplicateBlock: vi.fn(),
    editingBlockId: null,
    setEditingText: vi.fn(),
    onMoveSelectedItemUp: vi.fn(),
    onMoveSelectedItemDown: vi.fn(),
    onIndentSelectedItem: vi.fn(),
    onOutdentSelectedItem: vi.fn(),
  });

  it("텍스트 블록이 선택된 상태에서 HELP 버튼을 노출해야 한다", () => {
    const textBlock = createTextBlock();

    render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);

    const helpButton = screen.getByRole("button", { name: "HELP" });
    expect(helpButton).toBeDefined();
  });

  it("HELP 버튼 클릭 시 현재 블록 타입에 맞는 튜토리얼 모달이 열려야 한다", () => {
    const textBlock = createTextBlock();

    render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);

    const helpButton = screen.getByRole("button", { name: "HELP" });
    fireEvent.click(helpButton);

    expect(screen.getByText("텍스트 블록 튜토리얼")).toBeDefined();
    expect(screen.getByText(/제목과 본문 텍스트를 입력할 때 사용하는 기본 블록입니다/)).toBeDefined();
  });

  it("모달의 닫기 버튼을 클릭하면 튜토리얼 모달이 닫혀야 한다", () => {
    const textBlock = createTextBlock();

    render(<PropertiesSidebar {...defaultProps([textBlock], textBlock.id)} />);

    const helpButton = screen.getByRole("button", { name: "HELP" });
    fireEvent.click(helpButton);

    const closeButton = screen.getByRole("button", { name: "닫기" });
    fireEvent.click(closeButton);

    expect(screen.queryByText("텍스트 블록 튜토리얼")).toBeNull();
  });
});