onsitesurvey/src/components/inquiry/RegistForm.tsx

'use client'

import { useInquiry } from '@/hooks/useInquiry'
import { useSessionStore } from '@/store/session'
import { InquiryRequest } from '@/types/Inquiry'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
export default function RegistForm() {
  const { saveInquiry, isSavingInquiry } = useInquiry()
  const { session } = useSessionStore()
  const router = useRouter()

  // TODO: 세션 정보 적용 | 현재는 test용 정보 적용
  // useEffect(() => {
  //   setInquiryRequest({ ...inquiryRequest, regId: session?.userId ?? '', regUserNm: session?.userNm ?? '' })
  // }, [session])

  const [inquiryRequest, setInquiryRequest] = useState<InquiryRequest>({
    compCd: '5200',
    siteTpCd: 'QC',
    qnaClsLrgCd: '',
    qnaClsMidCd: 'B02',
    qnaClsSmlCd: null,
    title: '',
    contents: null,
    regId: 'X112',
    regUserNm: 'TEST',
    regUserTelNo: null,
    storeId: null,
  })

  const [attachedFiles, setAttachedFiles] = useState<File[]>([])

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files && files.length > 0) {
      setAttachedFiles(attachedFiles.concat(Array.from(files)))
    }
    e.target.value = ''
  }

  const handleRemoveFile = (index: number) => {
    setAttachedFiles(attachedFiles.filter((_, i) => i !== index))
  }

  const handleSubmit = async () => {
    if (confirm('お問い合わせを登録しますか？ Hanwha Japanの担当者にお問い合わせメールが送信されます。')) {
      const res = await saveInquiry({ inquiryRequest, files: attachedFiles })
      alert('保存されました。')
      router.push(`/inquiry/${res.qnaNo}`)
    }
    return
  }

  return (
    <>
      <div className="inquiry-frame">
        <div className="data-form-wrap">
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">
              お問い合わせタイプ <i className="import">*</i>
            </div>
            <div className="data-input">
              <select className="select-form" name="" id="">
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
              </select>
            </div>
            <div className="data-input mt5">
              <select className="select-form" name="" id="">
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
              </select>
            </div>
            <div className="data-input mt5">
              <select className="select-form" name="" id="">
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
                <option value="">屋根適合</option>
              </select>
            </div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">
              名前 <i className="import">*</i>
            </div>
            <div className="data-input">
              <input className="input-frame" type="text" placeholder="名前を書いてください" />
            </div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">電話番号</div>
            <div className="data-input">
              <input className="input-frame" type="text" placeholder="電話番号を書き留めてください" />
            </div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">
              名前 <i className="import">*</i>
            </div>
            <div className="data-input">
              <input className="input-frame" type="text" placeholder="名前を書いてください" />
            </div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">電話番号</div>
            <div className="data-input">
              <input className="input-frame" type="text" placeholder="電話番号を書き留めてください" />
            </div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">
              お問い合わせタイトル <i className="import">*</i>
            </div>
            <div className="data-input">
              <input className="input-frame" type="text" placeholder="お問い合わせタイトルを記入してください" />
            </div>
          </div>
          <div className="data-input-form-bx">
            <div className="data-input-form-tit">
              お問い合わせタイプ <i className="import">*</i>
            </div>
            <div className="data-input">
              <textarea
                className="textarea-form"
                rows={6}
                name=""
                id=""
                placeholder="TextArea Filed"
                onChange={(e) => setInquiryRequest({ ...inquiryRequest, contents: e.target.value })}
              ></textarea>
            </div>
          </div>
        </div>
        <div className="inquiry-file-wrap">
          <div className="filebox">
            <label className="btn-frame l-blue icon" htmlFor="file">
              <i className="btn-clip"></i>Attach ファイル
            </label>
            <input type="file" id="file" onChange={handleFileChange} multiple style={{ display: 'none' }} />
          </div>
          <div className="file-list-wrap">
            <div className="file-list-tit">
              添付ファイル<span>{attachedFiles.length}</span>個
            </div>
            <ul className="file-list">
              {attachedFiles.map((file, index) => (
                <li className="file-item" key={`${file.name}-${index}`}>
                  <div className="file-item-bx">
                    <div className="file-item-name">{file.name}</div>
                    <button className="file-del" onClick={() => handleRemoveFile(index)} aria-label="Remove file" />
                  </div>
                </li>
              ))}
            </ul>
          </div>
          <div className="sale-edit-btn">
            <button className="btn-frame n-blue icon" onClick={handleSubmit} disabled={isSavingInquiry}>
              登録<i className="btn-arr"></i>
            </button>
          </div>
        </div>
      </div>
    </>
  )
}