import type { ReactNode } from "react"
import type { Meta, StoryObj } from "@storybook/react-vite"
import { ScrollArea, ScrollBar } from "@hm-design/ui"
import { StateBoard } from "@/components/story-board"
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"

// Scroll Area is Radix scrolling with a styled scrollbar (type "hover": the bar shows while hovering or scrolling). Sizes below
// are Story layout. The representative Story shows vertical, horizontal, both axes and a table-like content.

const items = Array.from({ length: 30 }, (_, i) => `항목 ${i + 1}`)

function Vertical() {
  return (
    <ScrollArea style={{ height: 200, width: 280 }} className="rounded-md border">
      <div className="p-3 text-sm">
        {items.map((t) => (
          <div key={t} className="py-1.5">
            {t}
          </div>
        ))}
      </div>
    </ScrollArea>
  )
}

function Horizontal() {
  return (
    <ScrollArea style={{ width: 280 }} className="rounded-md border whitespace-nowrap">
      <div className="flex w-max gap-3 p-3">
        {Array.from({ length: 12 }, (_, i) => (
          <div key={i} className="grid h-16 w-24 place-items-center rounded-md bg-muted text-sm">{`카드 ${i + 1}`}</div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

function Both() {
  return (
    <ScrollArea style={{ height: 200, width: 280 }} className="rounded-md border">
      <div className="p-3 text-sm" style={{ width: 600 }}>
        {items.map((t) => (
          <div key={t} className="py-1.5">{`${t} — 가로로도 길어지는 내용입니다. 가로 scroll로 끝까지 볼 수 있습니다.`}</div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

function TableLike() {
  return (
    <ScrollArea style={{ height: 180, width: 300 }} className="rounded-md border">
      <div className="grid text-sm" style={{ width: 520 }}>
        {Array.from({ length: 12 }, (_, r) => (
          <div key={r} className="grid grid-cols-4 border-b p-2">
            {["번호", "이름", "상태", "금액"].map((c) => (
              <span key={c}>{`${c} ${r + 1}`}</span>
            ))}
          </div>
        ))}
      </div>
      <ScrollBar orientation="horizontal" />
    </ScrollArea>
  )
}

const sections: { id: string; label: string; node: ReactNode }[] = [
  { id: "vertical", label: "Vertical", node: <Vertical /> },
  { id: "horizontal", label: "Horizontal", node: <Horizontal /> },
  { id: "both", label: "Both axes", node: <Both /> },
  { id: "table-like", label: "Table-like content", node: <TableLike /> },
]

const meta = { title: "Components/Data & Display/Scroll Area", component: ScrollArea, parameters: { layout: "padded" } } satisfies Meta<typeof ScrollArea>
export default meta
type Story = StoryObj<typeof meta>

const board = (...ids: string[]) => (
  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
)

// Representative Story: the common Story page; the sections group the same specimens.
export const All: Story = {
  name: "Scroll Area",
  parameters: { layout: "fullscreen", controls: { disable: true } },
  render: () => (
    <StoryPage>
      <StoryPageHeader
        kicker={STORY_KICKER.components}
        title="Scroll Area"
        description="정해진 크기 안에서 내용을 스크롤하는 영역입니다. 스크롤바는 포인터를 올리거나 스크롤할 때 나타납니다."
      />
      <StorySection title="Overview">{board("vertical")}</StorySection>
      <StorySection title="Variants" description="가로와 양방향 스크롤입니다.">{board("horizontal", "both")}</StorySection>
      <StorySection title="Usage">{board("table-like")}</StorySection>
    </StoryPage>
  ),
}

export const VerticalScroll: Story = { tags: ["verification"], name: "Vertical", render: () => <Vertical /> }
export const HorizontalScroll: Story = { tags: ["verification"], name: "Horizontal", render: () => <Horizontal /> }