import { useEffect, useRef, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'

import { useSwal } from '@/hooks/useSwal'
import { useAxios } from '../useAxios'
import { currentCanvasPlanState } from '@/store/canvasAtom'
import { convertDwgToPng, writeImageBuffer } from '@/lib/fileAction'

export function useRefFiles() {
  const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
  const [refImage, setRefImage] = useState(null)
  const [refFileMethod, setRefFileMethod] = useState('1')
  const [mapPositionAddress, setMapPositionAddress] = useState('')
  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
  const queryRef = useRef(null)

  const { swalFire } = useSwal()
  const { get, promisePut, promisePost } = useAxios()
  // const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()

  /**
   * 파일 불러오기 버튼 컨트롤
   * @param {*} file
   */
  const handleRefFile = (file) => {
    setRefImage(file)
    /**
     * 파일 확장자가 dwg일 경우 변환하여 이미지로 저장
     * 파일 확장자가 이미지일 경우 이미지 저장
     */
    file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
    // handleUploadRefFile(file)
  }

  /**
   * 파일 삭제
   */
  const handleFileDelete = () => {
    setRefImage(null)
    setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: null }))
  }

  /**
   * 주소 삭제
   */
  const handleAddressDelete = () => {
    setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
  }

  /**
   * 주소로 구글 맵 이미지 다운로드
   */
  const handleMapImageDown = async () => {
    if (queryRef.current.value === '' || queryRef.current.value === null) {
      return
    }

    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryRef.current.value}&fileNm=${uuidv4()}&zoom=20` })
    console.log('🚀 ~ handleMapImageDown ~ res:', res)
    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: res.fileNm, mapPositionAddress: queryRef.current.value }))
  }

  /**
   * 이미지 파일 업로드
   * @param {*} file
   */
  const handleUploadImageRefFile = async (file) => {
    console.log('🚀 ~ handleUploadImageRefFile ~ file:', file)
    const formData = new FormData()
    formData.append('file', file)

    const response = await fetch('http://localhost:3000/api/image-upload', {
      method: 'POST',
      body: formData,
    })

    const result = await response.json()
    console.log('🚀 ~ handleUploadImageRefFile ~ res:', result)
    // writeImageBuffer(file)
  }

  /**
   * RefFile이 캐드 도면 파일일 경우 변환하여 이미지로 저장
   * @param {*} file
   */
  const handleUploadConvertRefFile = async (file) => {
    const formData = new FormData()
    formData.append('file', file)

    await promisePost({ url: converterUrl, data: formData })
      .then((res) => {
        convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
        swalFire({ text: '파일 변환 성공' })
      })
      .catch((err) => {
        swalFire({ text: '파일 변환 실패', icon: 'error' })
      })
  }

  /**
   * 라디오 버튼 컨트롤
   * @param {*} e
   */
  const handleRefFileMethod = (e) => {
    setRefFileMethod(e.target.value)
  }

  /**
   * 현재 플랜이 변경되면 플랜 상태 저장
   */
  useEffect(() => {
    console.log('🚀 ~ useRefFiles ~ currentCanvasPlan:', currentCanvasPlan)
    //   const handleCurrentPlan = async () => {
    //     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
    //       console.log('🚀 ~ awaitpromisePut ~ res:', res)
    //     })
    //   }
    //   handleCurrentPlan()
  }, [currentCanvasPlan])

  return {
    refImage,
    queryRef,
    setRefImage,
    handleRefFile,
    refFileMethod,
    setRefFileMethod,
    mapPositionAddress,
    setMapPositionAddress,
    handleRefFileMethod,
    handleFileDelete,
    handleAddressDelete,
    handleMapImageDown,
  }
}