'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 SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'

export default function FloorPlan() {
  const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
  const [showOutlineModal, setShowOutlineModal] = useState(false)
  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const { get } = useAxios(globalLocaleState)

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

  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
  const [showGridCopyModal, setShowGridCopyModal] = useState(false)
  const [showGridMoveModal, setShowGridMoveModal] = useState(false)
  const canvasSettingProps = {
    setShowCanvasSettingModal,
    setShowDotLineGridModal,
  }

  const outlineProps = {
    setShowOutlineModal,
  }

  const modalProps = {
    setShowCanvasSettingModal,
    showOutlineModal,
    setShowOutlineModal,
  }

  useEffect(() => {
    console.log('FloorPlan useEffect 실행')
    fetchSettings()
  }, [showOutlineModal, 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)
    }
  }
  const dotLineProps = {
    showDotLineGridModal,
    setShowDotLineGridModal,
  }

  useEffect(() => {}, [showOutlineModal])

  return (
    <>
      <div className="canvas-wrap">
        <CanvasMenu {...modalProps} />
        <div className="canvas-content">
          <CanvasLayout />
          {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
          {/*{showOutlineModal && <OuterLineWall {...outlineProps} />}*/}
          {showOutlineModal && <WallLineSetting {...outlineProps} />}
          {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
        </div>
      </div>
    </>
  )
}