'use client'

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

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

  const { swalFire } = useSwal()

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

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

    const fileList = []
    let passFlag = true
    const allowedFileTypes = [
      'image/',
      'application/pdf',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/vnd.ms-excel',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation', // PPTX 형식
      'application/vnd.ms-powerpoint', // PPT 형식
    ]
    Array.from(e.target.files).forEach((file) => {
      //엑셀, pdf, 이미지
      const fileType = file.type
      if (!allowedFileTypes.some((type) => fileType.includes(type))) {
        passFlag = false
      } else {
        fileList.push({ data: file, id: uuidv4() })
      }
    })

    if (!passFlag) {
      swalFire({ text: getMessage('estimate.detail.fileList.extCheck'), type: 'alert', icon: 'error' })
    }

    setUploadFiles([...uploadFiles, ...fileList])
    setQnaData({...qnaData, files:[...uploadFiles, ...fileList]})
    e.target.value = ''
  }

  const deleteFile = (id) => {
    setUploadFiles(uploadFiles.filter((file) => file.id !== id))
    setQnaData({...qnaData, files:uploadFiles.filter((file) => file.id !== id)})
  }

  const handleDrop = (e) => {
    e.preventDefault()
    e.stopPropagation()
    const fileList = []
    let passFlag = true
    const allowedFileTypes = [
      'image/',
      'application/pdf',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      'application/vnd.ms-excel',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation', // PPTX 형식
      'application/vnd.ms-powerpoint', // PPT 형식
    ]

    Array.from(e.dataTransfer.files).forEach((file) => {
      //엑셀, pdf, 이미지
      let fileType = file.type
      if (!allowedFileTypes.some((type) => fileType.includes(type))) {
        passFlag = false
      } else {
        fileList.push({ data: file, id: uuidv4() })
      }
    })

    if (!passFlag) {
      swalFire({ text: getMessage('estimate.detail.fileList.extCheck'), type: 'alert', icon: 'error' })
    }

    setUploadFiles([...uploadFiles, ...fileList])
    setQnaData({...qnaData, files:[...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="design-request-grid mt15">
      <div className="design-request-count">
        <div className="design-request-grid-tit">{getMessage("qna.reg.header.fileList")}</div>
        <div className="btn-area one-on-one">
          <label className="file-upload" htmlFor="img" onClick={handleButtonClick}>
            Attach File
          </label>
          <input type="file" multiple name="file" ref={fileInputRef} style={{ display: 'none' }} onChange={(e) => onChangeFiles(e)} />
        </div>
      </div>
      <div className="drag-file-box one-on-one">
        <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>
    </div>

  )
}