import { useState } from 'react'
import {
  Modal,
  Button,
  Input,
  Form,
  toast,
  TextField,
  Label,
  FieldError,
} from '@heroui/react'
import { api } from '../api/client'
import { useSWRConfig } from 'swr'

export function CreateResourceModal({
  isOpen,
  onOpenChange,
}: {
  isOpen: boolean
  onOpenChange: (isOpen: boolean) => void
}) {
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [url, setUrl] = useState('')
  const [icon, setIcon] = useState('')
  const [category, setCategory] = useState('')
  const [loading, setLoading] = useState(false)
  const { mutate } = useSWRConfig()

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setLoading(true)
    try {
      await api.resources.post({
        title,
        description,
        url,
        icon,
        category,
      })
      mutate('/resources')
      onOpenChange(false)
      setTitle('')
      setDescription('')
      setUrl('')
      setIcon('')
      setCategory('')
    } catch (err) {
      console.error(err)
      toast.danger('创建失败')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
      <Modal.Backdrop>
        <Modal.Container>
          <Modal.Dialog>
            <Modal.Header>
              <Modal.Heading>添加新资源</Modal.Heading>
              <Modal.CloseTrigger />
            </Modal.Header>
            <Modal.Body>
              <Form
                validationBehavior="native"
                onSubmit={handleSubmit}
                className="flex flex-col gap-4"
              >
                <TextField
                  isRequired
                  name="title"
                  value={title}
                  onChange={setTitle}
                >
                  <Label>标题</Label>
                  <Input placeholder="资源名称" variant="secondary" />
                  <FieldError />
                </TextField>

                <TextField
                  name="description"
                  value={description}
                  onChange={setDescription}
                >
                  <Label>描述</Label>
                  <Input placeholder="简短描述" variant="secondary" />
                  <FieldError />
                </TextField>

                <TextField isRequired name="url" value={url} onChange={setUrl}>
                  <Label>链接</Label>
                  <Input placeholder="https://..." variant="secondary" />
                  <FieldError />
                </TextField>

                <TextField name="icon" value={icon} onChange={setIcon}>
                  <Label>图标 URL</Label>
                  <Input placeholder="如: /icon/hlae.png" variant="secondary" />
                  <FieldError />
                </TextField>

                <TextField
                  name="category"
                  value={category}
                  onChange={setCategory}
                >
                  <Label>版本/分类</Label>
                  <Input placeholder="如: v2.189.6" variant="secondary" />
                  <FieldError />
                </TextField>

                <Button type="submit" isPending={loading}>
                  提交
                </Button>
              </Form>
            </Modal.Body>
            <Modal.Footer>
              <Button variant="tertiary" onPress={() => onOpenChange(false)}>
                取消
              </Button>
            </Modal.Footer>
          </Modal.Dialog>
        </Modal.Container>
      </Modal.Backdrop>
    </Modal>
  )
}
