qcast-front/src/hooks/common/useRefFiles.js

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

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

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 canvas = useRecoilValue(canvasState)
  const { handleBackImageLoadToCanvas } = useCanvas()
  const { swalFire } = useSwal()
  const { get, post, promisePost } = useAxios()

  useEffect(() => {
    if (refFileMethod === '1') {
      // 파일 불러오기
      setMapPositionAddress('')
    } else {
      setRefImage(null)
    }
  }, [refFileMethod])

  /**
   * 현재 플랜이 변경되면 플랜 상태 저장
   */
  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])

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

    if (refImage) {
      swalFire({
        text: '파일을 변경하시겠습니까?',
        type: 'confirm',
        confirmFn: () => {
          refFileSetting(file)
          // setRefImage(file)
          // file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(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)) {
        // file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
        handleUploadImageRefFile(file)
      } else {
        swalFire({
          text: '이미지가 아닙니다.',
          type: 'alert',
          icon: 'error',
        })
      }
    }
  }
  /**
   * 파일 삭제
   */
  const handleFileDelete = () => {
    swalFire({
      text: '삭제하시겠습니까?',
      type: 'confirm',
      confirmFn: () => {
        setRefImage(null)
        setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: null }))
        removeImage(currentCanvasPlan.id).then((res) => {
          console.log(res)
        })
      },
    })
  }

  /**
   * 주소 삭제
   */
  const handleAddressDelete = () => {
    swalFire({
      text: '삭제하시겠습니까?',
      type: 'confirm',
      confirmFn: () => {
        setMapPositionAddress('')
        setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
        removeImage(currentCanvasPlan.id).then((res) => {
          console.log(res)
        })
      },
    })
  }

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

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

  /**
   * 배경 이미지 로드를 위한 세팅
   */
  useEffect(() => {
    if (!currentBgImage) {
      return
    }
    console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
    // handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`)
    handleBackImageLoadToCanvas(currentBgImage)
    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: refImage?.name ?? null, mapPositionAddress: queryRef.current.value }))
  }, [currentBgImage])

  /**
   * 이미지 파일 업로드
   * @param {*} file
   */
  const handleUploadImageRefFile = async (file) => {
    const formData = new FormData()
    formData.append('file', file)
    // formData.append('fileName', currentCanvasPlan.id)

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

  /**
   * 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: `${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)
    // await promisePost({ url: converterUrl, data: formData })
    //   .then((res) => {
    //     convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
    //     swalFire({ text: '파일 변환 성공' })
    //     setRefImage(res.data.Files[0].FileData)
    //   })
    //   .catch((err) => {
    //     swalFire({ text: '파일 변환 실패', icon: 'error' })
    //   })
  }

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

  /**
   * 이미지 저장 시 왼쪽 위, 오른쪽 아래 좌표
   * return [start, end]
   */
  const getImageCoordinate = () => {
    const minX = canvas.getObjects().reduce((acc, cur) => (cur.left < acc ? cur.left : acc), 0)
    const minY = canvas.getObjects().reduce((acc, cur) => (cur.top < acc ? cur.top : acc), 0)

    const maxX = canvas.getObjects().reduce((acc, cur) => (cur.left + cur.width > acc ? cur.left + cur.width : acc), 0)
    const maxY = canvas.getObjects().reduce((acc, cur) => (cur.top + cur.height > acc ? cur.top + cur.height : acc), 0)
    return [
      { x: minX - 20, y: minY - 20 },
      { x: maxX + 20, y: maxY + 20 },
    ]
  }

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