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

// Loading Screen is a Dashboard-local pattern (ui-viz LoadingScreen). Inline fills its parent; fullscreen covers the viewport. The
// fullscreen demo is mounted and removed by local state only; there is no async task, cancel or close control in the pattern.

function Fullscreen() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button appearance="outline" onClick={() => setOpen(true)}>전체화면 미리보기</Button>
      {open ? (
        <>
          <LoadingScreen fullscreen>데이터를 불러오는 중</LoadingScreen>
          <Button className="fixed top-7 right-7 z-[10000]" onClick={() => setOpen(false)}>닫기</Button>
        </>
      ) : null}
    </>
  )
}

const meta = { title: "Patterns/Layout/Loading Screen", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
export default meta
type Story = StoryObj<typeof meta>

// The inline specimen fills its parent inside the common page Inner.
export const All: Story = {
  name: "Loading Screen",
  parameters: { layout: "fullscreen" },
  render: () => (
    <StoryPage>
      <StoryPageHeader
        kicker={STORY_KICKER.patterns}
        title="Loading Screen"
        description="Dashboard 안에서 데이터를 불러오는 동안 표시하는 화면입니다. Inline은 부모 영역을 채우고, fullscreen은 viewport 전체를 덮습니다."
      />
      <StorySection title="Overview" description="Inline: 부모 영역(여기서는 공통 Inner 폭)을 채웁니다.">
        <LoadingScreen />
      </StorySection>
      <StorySection title="Variants" description="사용자 문구와 좁은 부모 영역입니다.">
        <StateBoard
          states={[
            { id: "label", label: "Custom label", children: <LoadingScreen>데이터를 불러오는 중</LoadingScreen> },
            { id: "narrow", label: "Narrow parent (240px)", children: <div style={{ width: 240 }}><LoadingScreen /></div> },
          ]}
        />
      </StorySection>
      <StorySection title="Usage" description="fullscreen은 viewport 전체를 덮습니다. 버튼으로 열고 오른쪽 위 닫기로 닫습니다.">
        <Fullscreen />
      </StorySection>
    </StoryPage>
  ),
}
export const Inline: Story = { tags: ["verification"], render: () => <LoadingScreen /> }