import { useState } from 'react'
import { Banner } from '@astryxdesign/core/Banner'
import { Button } from '@astryxdesign/core/Button'
import { HStack } from '@astryxdesign/core/HStack'
import { Switch } from '@astryxdesign/core/Switch'
import { TextArea } from '@astryxdesign/core/TextArea'
import { TextInput } from '@astryxdesign/core/TextInput'
import { VStack } from '@astryxdesign/core/VStack'

export function InputsDemo() {
  const [name, setName] = useState('模板项目')
  const [description, setDescription] = useState(
    '一个使用 Astryx 搭建的 React 应用。',
  )
  const [updates, setUpdates] = useState(true)
  const [saved, setSaved] = useState(false)

  return (
    <VStack gap={4}>
      <TextInput
        label="项目名称"
        value={name}
        onChange={setName}
        isRequired
        width="100%"
      />
      <TextArea
        label="项目描述"
        value={description}
        onChange={setDescription}
        rows={3}
        width="100%"
      />
      <Switch
        label="版本更新提醒"
        description="有新版本时发送一封简短的邮件。"
        value={updates}
        onChange={setUpdates}
      />
      <HStack gap={2} hAlign="end">
        <Button
          label="保存设置"
          variant="primary"
          onClick={() => setSaved(true)}
        />
      </HStack>
      {saved ? (
        <Banner
          status="success"
          title="设置已保存"
          description="表单值只保存在当前演示的内存中。"
          isDismissable
          onDismiss={() => setSaved(false)}
        />
      ) : null}
    </VStack>
  )
}