'use client'

import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import '@/styles/contents.scss'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'

export default function FloorPlan() {
  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const { get } = useAxios(globalLocaleState)

  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요

  const [menuNumber, setMenuNumber] = useState(null)

  const modalProps = {
    menuNumber,
    setMenuNumber,
  }

  useEffect(() => {
    console.log('FloorPlan useEffect 실행')
    fetchSettings()
  }, [objectNo])

  // Canvas Setting 조회
  const fetchSettings = async () => {
    try {
      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
        ...item,
      }))
      // 데이터 설정
      setSettingModalFirstOptions({
        option1: optionData1,
        option2: optionData2,
        dimensionDisplay: optionData5,
      })
      setSettingModalSecondOptions({
        option3: optionData3,
        option4: optionData4,
      })
    } catch (error) {
      console.error('Data fetching error:', error)
    }
  }

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