'use client'

import { useEffect } from 'react'
//import { useRecoilState } from 'recoil'
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 { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
//import { correntObjectNoState } from '@/store/settingAtom'
import '@/styles/contents.scss'

export default function FloorPlan({ children }) {
  //const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
  //const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
  const { closeAll } = usePopup()
  const { menuNumber, setMenuNumber } = useCanvasMenu()
  const { fetchSettings } = useCanvasSetting()

  const modalProps = {
    menuNumber,
    setMenuNumber,
  }

  useEffect(() => {
    ///setCorrentObjectNo(floorPlanState.objectNo)
    //console.log('FloorPlan objectNo ', floorPlanState.objectNo, correntObjectNo)
    fetchSettings()
    return () => {
      closeAll()
    }
  }, [])

  return (
    <>
      <div className="canvas-wrap">
        <CanvasMenu {...modalProps} />
        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>{children}</div>
      </div>
    </>
  )
}