import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { useMasterController } from '@/hooks/common/useMasterController'
import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'

export function useModulePlace() {
  const canvas = useRecoilValue(canvasState)
  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
  const [trestleDetailParams, setTrestleDetailParams] = useState([])
  const [trestleDetailList, setTrestleDetailList] = useState([])
  const selectedModules = useRecoilValue(selectedModuleState)
  const { getTrestleDetailList } = useMasterController()

  useEffect(() => {
    if (moduleSelectionData) {
      const common = moduleSelectionData.common
      const roofConstructions = moduleSelectionData.roofConstructions

      const listParams = roofConstructions.map((item) => {
        return {
          ...common,
          moduleTpCd: selectedModules.itemTp,
          roofMatlCd: item.trestle.roofMatlCd,
          trestleMkrCd: item.trestle.trestleMkrCd,
          constMthdCd: item.trestle.constMthdCd,
          roofBaseCd: item.trestle.roofBaseCd,
          constTp: item.construction.constTp,
          mixMatlNo: selectedModules.mixMatlNo,
          roofPitch: selectedModules.roofPchBase ? selectedModules.roofPchBase : null,
          inclCd: String(item.addRoof.pitch),
          roofIndex: item.addRoof.index,
          workingWidth: item.addRoof.lenBase,
        }
      })
      setTrestleDetailParams(listParams)
    }
  }, [moduleSelectionData])

  const getTrestleDetailListData = async () => {
    const trestleDetailList = await getTrestleDetailList(trestleDetailParams)
    setTrestleDetailList(trestleDetailList)
  }

  useEffect(() => {
    if (trestleDetailParams.length > 0) {
      getTrestleDetailListData(trestleDetailParams)
    }
  }, [trestleDetailParams])

  useEffect(() => {
    //지붕을 가져옴
    console.log('🚀 ~ trestleDetailList.forEach ~ trestleDetailList:', trestleDetailList)
    canvas
      .getObjects()
      .filter((roof) => roof.name === 'roof')
      .forEach((roof) => {
        const roofIndex = roof.roofMaterial.index //지붕의 지붕재의 순번
        trestleDetailList.forEach((detail) => {
          if (Number(detail.data.roofIndex) === roofIndex) {
            //roof에 상세 데이터 추가
            roof.set({ trestleDetail: detail.data })

            //surface에 상세 데이터 추가
            canvas
              .getObjects()
              .filter((surface) => surface.name === 'moduleSetupSurface' && surface.parentId === roof.id)
              .forEach((surface) => {
                surface.set({ trestleDetail: detail.data, roofMaterial: roof.roofMaterial })
              })
          }
        })
      })
  }, [trestleDetailList])

  return {
    selectedModules,
  }
}