'use client'

import { useContext, useEffect } from 'react'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { usePopup } from '@/hooks/usePopup'
import '@/styles/contents.scss'
import { notFound, useSearchParams } from 'next/navigation'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { correntObjectNoState } from '@/store/settingAtom'
import { currentMenuState } from '@/store/canvasAtom'
import { globalLocaleStore } from '@/store/localeAtom'
import { useAxios } from '@/hooks/useAxios'
import { GlobalDataContext } from '@/app/GlobalDataProvider'
import { sessionStore } from '@/store/commonAtom'

export default function FloorPlan({ children }) {
  const [correntObjectNo, setCurrentObjectNo] = useRecoilState(correntObjectNoState)
  const searchParams = useSearchParams()
  const objectNo = searchParams.get('objectNo')

  const { closeAll } = usePopup()
  const { selectedMenu, setSelectedMenu } = useCanvasMenu()
  const { fetchSettings } = useCanvasSetting()
  const resetCurrentMenu = useResetRecoilState(currentMenuState)
  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const { promiseGet } = useAxios(globalLocaleState)
  const { setManagementState } = useContext(GlobalDataContext)
  const [sessionState, setSessionState] = useRecoilState(sessionStore)

  useEffect(() => {
    getStuffDetailInfo()

    return () => {
      resetCurrentMenu()
    }
  }, [])

  const getStuffDetailInfo = () => {
    promiseGet({ url: `/api/object/${objectNo}/detail` }).then((res) => {
      if (res.status === 200) {
        const { data } = res
        console.log(data)

        let surfaceTypeValue
        if (res.data.surfaceType === 'Ⅲ・Ⅳ') {
          surfaceTypeValue = '3'
        } else if (res.data.surfaceType === 'Ⅱ') {
          surfaceTypeValue = '2'
        }
        //설치높이 0이면 빈값으로로 셋팅
        if (res.data.installHeight === '0') {
          res.data.installHeight = ''
        }

        setSessionState((prev) => ({
          ...prev,
          oneTwoStoreId: res.data.saleStoreId
        }));

        setManagementState({ ...res.data, surfaceTypeValue: surfaceTypeValue })
      }
    })
  }

  /**
   * URL 파라미터에서 objectNo 설정
   */
  useEffect(() => {
    if (!objectNo) {
      notFound()
    }
    setCurrentObjectNo(objectNo)
  }, [objectNo, setCurrentObjectNo])

  /**
   * 설정 데이터 fetch
   */
  useEffect(() => {
    /** correntObjectNo가 없으면 실행하지 않음 */
    if (!correntObjectNo) return

    /** CanvasSetting 데이터 fetch */
    fetchSettings()

    return () => {
      closeAll()
    }
  }, [correntObjectNo])

  const modalProps = {
    selectedMenu,
    setSelectedMenu,
  }

  return (
    <>
      <div className="canvas-wrap">
        <CanvasMenu {...modalProps} />
        <div className={`canvas-content ${selectedMenu === 'outline' || selectedMenu === 'surface' || selectedMenu === 'module' ? 'active' : ''}`}>
          {children}
        </div>
      </div>
    </>
  )
}