import { useState } from 'react'
import { Button, Checkbox, Drawer, Space, Switch, Text } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function Drawers() {
  const [rightOpen, setRightOpen] = useState(false)
  const [leftOpen, setLeftOpen] = useState(false)
  const [autoSync, setAutoSync] = useState(true)
  const [notify, setNotify] = useState(false)

  return (
    <Section
      id="drawer"
      title="抽屉"
      api="Drawer"
      desc="从侧边滑出的面板：筛选、设置、详情。基于原生 <dialog>（焦点陷阱、Esc、背景 inert），贴边全高，不打断主流程。"
    >
      <Demo
        title="右侧设置"
        desc="标题栏带关闭按钮；底部操作区可选。点遮罩或按 Esc 也会关闭。"
        code={`const [open, setOpen] = useState(false)

<Button onClick={() => setOpen(true)}>打开设置</Button>
<Drawer open={open} onClose={() => setOpen(false)} title="偏好设置"
  footer={<><Button variant="ghost" onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={() => setOpen(false)}>保存</Button></>}>
  …
</Drawer>`}
      >
        <Space gap="md" wrap>
          <Button onClick={() => setRightOpen(true)}>打开设置</Button>
          <Button variant="secondary" onClick={() => setLeftOpen(true)}>
            左侧抽屉
          </Button>
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'open', type: 'boolean', required: true, desc: '受控开关' },
          { name: 'onClose', type: '() => void', required: true, desc: 'Esc / 遮罩 / 关闭按钮都会调用' },
          { name: 'title', type: 'ReactNode', desc: '标题' },
          { name: 'placement', type: "'right' | 'left'", defaultValue: "'right'", desc: '贴哪一边' },
          { name: 'width', type: 'number', defaultValue: '360', desc: '宽度（px）' },
          { name: 'footer', type: 'ReactNode', desc: '底部操作区' },
        ]}
      />

      <Drawer
        open={rightOpen}
        onClose={() => setRightOpen(false)}
        title="偏好设置"
        footer={
          <>
            <Button variant="ghost" onClick={() => setRightOpen(false)}>
              取消
            </Button>
            <Button onClick={() => setRightOpen(false)}>保存</Button>
          </>
        }
      >
        <Space direction="column" gap="lg" align="stretch">
          <Space justify="between">
            <Text>自动同步</Text>
            <Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
          </Space>
          <Checkbox checked={notify} onChange={setNotify} label="每周摘要提醒" />
          <Text size="sm" tone="muted">
            抽屉内容通常是表单或筛选器；需要打断流程的确认请用 Modal。
          </Text>
        </Space>
      </Drawer>

      <Drawer
        open={leftOpen}
        onClose={() => setLeftOpen(false)}
        placement="left"
        width={300}
        title="导航"
      >
        <Text size="sm" tone="muted">
          左侧抽屉常用于移动端导航；桌面端优先用常驻侧栏。
        </Text>
      </Drawer>
    </Section>
  )
}