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 { 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 title="Loading Screen" />
      <StorySection title="Overview">
        <LoadingScreen />
      </StorySection>
      <StorySection title="Variants">
        <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">
        <Fullscreen />
      </StorySection>
    </StoryPage>
  ),
}
export const Inline: Story = { tags: ["verification"], render: () => <LoadingScreen /> }