'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

export interface InquiryFormData {
  category: string
  title: string
  content: string
  file: File[]
}

export default function InquiryWriteForm() {
  const router = useRouter()
  const [formData, setFormData] = useState<InquiryFormData>({
    category: 'A',
    title: '',
    content: '',
    file: [],
  })

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = Array.from(e.target.files || [])
    setFormData({ ...formData, file: [...formData.file, ...file] })
  }
  const handleSubmit = () => {
    console.log('submit: ', formData)
    // router.push(`/inquiry`)
  }

  return (
    <div>
      <div>
        <label htmlFor="category">category</label>
        <select id="category" onChange={(e) => setFormData({ ...formData, category: e.target.value })}>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
      <div>
        <label htmlFor="title">title</label>
        <input type="text" id="title" onChange={(e) => setFormData({ ...formData, title: e.target.value })} />
      </div>
      <div>
        <label htmlFor="content">content</label>
        <textarea id="content" onChange={(e) => setFormData({ ...formData, content: e.target.value })} />
      </div>
      <div>
        <label htmlFor="file">file</label>
        <input type="file" id="file" accept="image/*" capture="environment" onChange={handleFileChange} />
        <div>
          <p>file count: {formData.file.length}</p>
          {formData.file.map((f) => (
            <div key={f.name}>
              <div>{f.name}</div>
              <div>
                <button>delete</button>
              </div>
            </div>
          ))}
        </div>
      </div>
      <button onClick={handleSubmit}>submit</button>
    </div>
  )
}