'use client'

import { useRef } from 'react'
import { v4 as uuidv4 } from 'uuid'
import { useMessage } from '@/hooks/useMessage'

export default function EstimateFileUploader({ uploadFiles, setUploadFiles }) {
  const fileInputRef = useRef(null)
  const { getMessage } = useMessage()

  const handleButtonClick = (e) => {
    e.preventDefault()
    fileInputRef.current.click()
  }

  const onChangeFiles = async (e) => {
    if (e.target.files.length <= 0) {
      return
    }

    const fileList = []
    let passFlag = true
    Array.from(e.target.files).forEach((file) => {
      let fileType = file.type
      if (!fileType.includes('image')) {
        passFlag = false
      } else {
        fileList.push({ data: file, id: uuidv4() })
      }
    })

    if (!passFlag) {
      alert(getMessage('estimate.detail.fileList.extCheck'))
    }

    // const { files } = e.target
    // const file = files[0]
    // const fileType = file.type
    // if (!fileType.includes('image')) {
    //   return alert(getMessage('estimate.detail.fileList.extCheck'))
    // }

    // setUploadFiles([...uploadFiles, { data: e.target.files[0], id: uuidv4() }])
    //다중으로 변경
    setUploadFiles([...uploadFiles, ...fileList])
    e.target.value = ''
    // const formData = new FormData()
    // formData.append('file', e.target.files[0])
    // formData.append('objectNo', objectNo) // 받아와야 하는 값
    // formData.append('planNo', planNo) // 받아와야 하는 값
    // formData.append('category', category) // 받아와야 하는 값
    // formData.append('userId', session.userId)

    // await promisePost({ url: '/api/file/fileUpload', data: formData }).then((res) => {
    //   if (res.data > 0) setUploadFiles([...files, { name: e.target.files[0].name, id: uuidv4() }])
    // })
  }

  const deleteFile = (id) => {
    setUploadFiles(uploadFiles.filter((file) => file.id !== id))
  }

  const handleDrop = (e) => {
    e.preventDefault()
    e.stopPropagation()
    const fileList = []
    let passFlag = true

    Array.from(e.dataTransfer.files).forEach((file) => {
      let fileType = file.type
      if (!fileType.includes('image')) {
        passFlag = false
      } else {
        fileList.push({ data: file, id: uuidv4() })
      }
    })

    if (!passFlag) {
      alert(getMessage('estimate.detail.fileList.extCheck'))
    }

    setUploadFiles([...uploadFiles, ...fileList])
  }

  const handleDragOver = (e) => {
    e.preventDefault()
    e.stopPropagation()
  }

  const handleDragEnd = (e) => {
    e.preventDefault()
    e.stopPropagation()
  }

  const handleDragLeave = (e) => {
    e.preventDefault()
    e.stopPropagation()
  }

  return (
    <div className="drag-file-box">
      <div className="btn-area">
        <label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
          {getMessage('estimate.detail.fileList.btn')}
        </label>
        <input
          type="file"
          multiple
          name="file"
          id="img"
          accept="image/*"
          ref={fileInputRef}
          style={{ display: 'none' }}
          onChange={(e) => onChangeFiles(e)}
        />
      </div>
      <div
        className="drag-file-area"
        draggable
        onDrop={(e) => handleDrop(e)}
        onDragOver={(e) => handleDragOver(e)}
        onDragEnd={(e) => handleDragEnd(e)}
        onDragLeave={(e) => handleDragLeave(e)}
      >
        <p>Drag file here</p>
        <ul className="file-list">
          {uploadFiles.length > 0 &&
            uploadFiles.map((file) => (
              <li className="file-item" key={file.id}>
                <span>
                  {file.data.name} <button className="delete" onClick={() => deleteFile(file.id)}></button>
                </span>
              </li>
            ))}
        </ul>
      </div>
    </div>
  )
}