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

export function Switches() {
  const [autoSync, setAutoSync] = useState(true)
  const [showCover, setShowCover] = useState(false)
  const [compact] = useState(true)

  return (
    <Section
      id="switch"
      title="开关"
      api="Switch"
      desc="设置项的即时开关：改了立刻生效，不需要「保存」。需要用户确认的场景用 Checkbox + 提交按钮，不要用开关。"
    >
      <Demo
        title="基础用法"
        desc="受控组件：checked + onChange。旁边有文字说明时，文字用 Text，开关的 label 仍要传（供读屏）。"
        layout="column"
        code={`<Space justify="between" style={{ width: 280 }}>
  <Text>自动同步</Text>
  <Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
</Space>`}
      >
        <Space justify="between" style={{ width: 300 }}>
          <Text>自动同步</Text>
          <Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
        </Space>
        <Space justify="between" style={{ width: 300 }}>
          <Text>显示封面图</Text>
          <Switch checked={showCover} onChange={setShowCover} label="显示封面图" />
        </Space>
      </Demo>

      <Demo
        title="尺寸"
        desc="sm 用于行内紧凑列表，md 用于设置表单。"
        code={`<Switch size="sm" checked={on} onChange={setOn} label="紧凑模式" />
<Switch size="md" checked={on} onChange={setOn} label="紧凑模式" />`}
      >
        <Space gap="lg">
          <Switch size="sm" checked={compact} onChange={() => undefined} label="紧凑模式" />
          <Switch size="md" checked={compact} onChange={() => undefined} label="紧凑模式" />
        </Space>
      </Demo>

      <Demo
        title="禁用"
        desc="禁用时保留当前状态的可读性，只降透明度并改光标。"
        code={`<Switch checked onChange={() => {}} disabled label="不可修改" />`}
      >
        <Space gap="lg">
          <Switch checked onChange={() => undefined} disabled label="不可修改（开）" />
          <Switch checked={false} onChange={() => undefined} disabled label="不可修改（关）" />
        </Space>
      </Demo>

      <Demo
        title="开关行"
        desc="设置面板里每行一个开关时用 ToggleRow：左边标签（可带一行说明），右边开关，两端对齐，不用自己拼 Space。"
        layout="column"
        code={`<ToggleRow label="明暗切换" checked={on} onChange={setOn} />
<ToggleRow label="显示封面图" hint="列表里用封面代替首字" checked={showCover} onChange={setShowCover} />`}
      >
        <div style={{ width: 360 }}>
          <ToggleRow label="明暗切换" checked={autoSync} onChange={setAutoSync} />
          <ToggleRow
            label="显示封面图"
            hint="列表里用封面代替首字"
            checked={showCover}
            onChange={setShowCover}
          />
        </div>
      </Demo>

      <PropsTable
        rows={[
          { name: 'checked', type: 'boolean', required: true, desc: '受控状态' },
          { name: 'onChange', type: '(checked: boolean) => void', required: true, desc: '切换回调' },
          { name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '32×18 / 40×22' },
          { name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用' },
          { name: 'label', type: 'string', desc: '无障碍名称：旁边没有文字时必填' },
        ]}
      />

      <PropsTable
        rows={[
          { name: 'label', type: 'ReactNode', required: true, desc: '左侧标签' },
          { name: 'checked', type: 'boolean', required: true, desc: '受控状态' },
          { name: 'onChange', type: '(checked: boolean) => void', required: true, desc: '切换回调' },
          { name: 'switchLabel', type: 'string', desc: '读屏用的开关名称，默认取 label' },
          { name: 'hint', type: 'ReactNode', desc: '标签下方的一行说明' },
          { name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用' },
        ]}
      />
    </Section>
  )
}