import { useEffect, useRef, useState } from 'react'
import { useRecoilState, useSetRecoilState } from 'recoil'

import { useSwal } from '@/hooks/useSwal'
import { useAxios } from '../useAxios'
import { currentCanvasPlanState } from '@/store/canvasAtom'
import { useCanvas } from '@/hooks/useCanvas'
import { deleteBackGroundImage, setBackGroundImage } from '@/lib/imageActions'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
import { popSpinnerState } from '@/store/popupAtom'

/**
 * 배경 이미지 관리
 * 도면에 배경이미지를 로딩하는 기능을 제공
 *
 * 이미지 -> 캔버스 배경에 이미지 로드
 * 주소 -> 구글 맵에서 주소 검색 후 이미지로 다운로드 받아서 캔버스 배경에 이미지 로드
 * .dwg -> api를 통해서 .png로 변환 후 캔버스 배경에 이미지 로드
 * @returns {object}
 */
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 [currentBgImage, setCurrentBgImage] = useState(null)
  const queryRef = useRef(null)
  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
  const { handleBackImageLoadToCanvas } = useCanvas()
  const { swalFire } = useSwal()
  const { get, post, del } = useAxios()
  const setPopSpinnerStore = useSetRecoilState(popSpinnerState)

  useEffect(() => {
    if (refFileMethod === '1') {
      setMapPositionAddress('')
    } else {
      setRefImage(null)
    }
  }, [refFileMethod])

  /**
   * 파일 불러오기 버튼 컨트롤
   * @param {*} file
   */
  const handleRefFile = (file) => {
    console.log('handleRefFile', file)
    console.log('refImage', refImage)

    if (refImage) {
      swalFire({
        text: '파일을 변경하시겠습니까?',
        type: 'confirm',
        confirmFn: () => {
          refFileSetting(file)
        },
      })
    } else {
      refFileSetting(file)
    }
  }

  const refFileSetting = (file) => {
    console.log('🚀 ~ refFileSetting ~ file:', file)
    if (file.name.split('.').pop() === 'dwg') {
      handleUploadConvertRefFile(file)
    } else {
      if (file && ['image/png', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/gif'].includes(file.type)) {
        handleUploadImageRefFile(file)
      } else {
        swalFire({
          text: '이미지가 아닙니다.',
          type: 'alert',
          icon: 'error',
        })
      }
    }
  }

  /**
   * 파일 삭제
   */
  const handleFileDelete = async () => {
    swalFire({
      text: '삭제하시겠습니까?',
      type: 'confirm',
      confirmFn: async () => {
        setPopSpinnerStore(true)
        console.log('🚀 ~ handleFileDelete ~ handleFileDelete:', refImage)
        console.log('🚀 ~ handleFileDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
        await del({ url: `http://localhost:3000/api/image/upload?fileName=${currentCanvasPlan.bgImageName}` })
        // setRefImage(null)
        setCurrentBgImage(null)
        // setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: null }))
        await deleteBackGroundImage({
          objectId: currentCanvasPlan.id,
          planNo: currentCanvasPlan.planNo,
        })
        setPopSpinnerStore(false)
      },
    })
  }

  /**
   * 주소 삭제
   */
  const handleAddressDelete = async () => {
    swalFire({
      text: '삭제하시겠습니까?',
      type: 'confirm',
      confirmFn: async () => {
        console.log('🚀 ~ handleAddressDelete ~ handleAddressDelete:', refImage)
        console.log('🚀 ~ handleAddressDelete ~ currentCanvasPlan.bgImageName:', currentCanvasPlan.bgImageName)
        await del({ url: `http://localhost:3000/api/image/map?fileName=${currentCanvasPlan.bgImageName}` })
        setMapPositionAddress('')
        setCurrentBgImage(null)
        // setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
        await deleteBackGroundImage({
          objectId: currentCanvasPlan.id,
          planNo: currentCanvasPlan.planNo,
        })
      },
    })
  }

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

    const newOption1 = settingModalFirstOptions.option1.map((option) => ({
      ...option,
      selected: option.column === 'imageDisplay' ? true : option.selected,
    }))

    setSettingModalFirstOptions((prev) => ({
      ...prev,
      option1: newOption1,
    }))

    // const res = await get({
    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/map/convert?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
    // })
    const res = await get({
      url: `http://localhost:3000/api/image/map?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20`,
    })
    console.log('🚀 ~ handleMapImageDown ~ res:', res)
    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
    setCurrentBgImage(`${res.filePath}`)

    await setBackGroundImage({
      objectId: currentCanvasPlan.id,
      planNo: currentCanvasPlan.planNo,
      // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
      imagePath: `${res.filePath}`,
    })
  }

  /**
   * 배경 이미지 로드를 위한 세팅
   */
  useEffect(() => {
    // if (!currentBgImage) {
    //   return
    // }
    console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
    if (currentBgImage) {
      handleBackImageLoadToCanvas(currentBgImage)
      setCurrentCanvasPlan((prev) => ({
        ...prev,
        // bgImageName: refImage?.name ?? null,
        bgImageName: currentBgImage.split('/').pop(),
        mapPositionAddress: queryRef.current.value,
      }))
    } else {
      setRefImage(null)
      setCurrentCanvasPlan((prev) => ({
        ...prev,
        bgImageName: null,
        mapPositionAddress: null,
      }))
    }
  }, [currentBgImage])

  /**
   * 이미지 파일 업로드
   * @param {*} file
   */
  const handleUploadImageRefFile = async (file) => {
    setPopSpinnerStore(true)
    const newOption1 = settingModalFirstOptions.option1.map((option) => ({
      ...option,
      selected: option.column === 'imageDisplay' ? true : option.selected,
    }))

    setSettingModalFirstOptions((prev) => ({
      ...prev,
      option1: newOption1,
    }))

    const formData = new FormData()
    formData.append('file', file)

    // const res = await post({
    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`,
    //   data: formData,
    // })
    const res = await post({
      url: `http://localhost:3000/api/image/upload`,
      data: formData,
    })
    console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`)
    setCurrentBgImage(`${res.filePath}`)
    setRefImage(file)

    const params = {
      objectId: currentCanvasPlan.id,
      planNo: currentCanvasPlan.planNo,
      // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
      imagePath: `${res.filePath}`,
    }
    console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
    await setBackGroundImage(params)
    setPopSpinnerStore(false)
  }

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

    /** 캐드 도면 파일 변환 */
    const res = await post({ url: converterUrl, data: formData })
    console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)

    /** 캐드 도면 파일 업로드 */
    const result = await post({
      url: `http://localhost:3000/api/image/cad`,
      data: res,
    })
    console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)

    setCurrentBgImage(`${result.filePath}`)
    setRefImage(file)

    const params = {
      objectId: currentCanvasPlan.id,
      planNo: currentCanvasPlan.planNo,
      // imagePath: `${process.env.NEXT_PUBLIC_HOST_URL}${res.filePath}`,
      imagePath: `${result.filePath}`,
    }
    console.log('🚀 ~ handleUploadImageRefFile ~ params:', params)
    await setBackGroundImage(params)

    // const res = await post({ url: converterUrl, data: formData })
    // console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
    // const result = await post({
    //   url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`,
    //   data: res,
    // })
    // console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
    // setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${result.filePath}`)
    // setRefImage(res.Files[0].FileData)
  }

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

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