qcast-front/src/components/floor-plan/FloorPlan.jsx

'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'
import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
import GridColorSetting from './modal/grid/GridColorSetting'
import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
import Slope from '@/components/floor-plan/modal/Slope'
import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'

export default function FloorPlan() {
  const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
  const [showOutlineModal, setShowOutlineModal] = useState(false)
  const [showPlaceShapeModal, setShowPlaceShapeModal] = useState(false)
  const [showPropertiesSettingModal, setShowPropertiesSettingModal] = useState(false)
  const [showRoofShapeSettingModal, setShowRoofShapeSettingModal] = useState(false)
  const [showRoofShapePassivitySettingModal, setShowRoofShapePassivitySettingModal] = useState(false)
  const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
  const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
  const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
  const [showEavesGableEditModal, setShowEavesGableEditModal] = 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 [showColorPickerModal, setShowColorPickerModal] = useState(false)
  const canvasSettingProps = {
    setShowCanvasSettingModal,
    setShowDotLineGridModal,
    setShowColorPickerModal,
  }

  const outlineProps = {
    setShowOutlineModal,
    setShowPropertiesSettingModal,
  }

  const modalProps = {
    setShowCanvasSettingModal,
    showOutlineModal,
    setShowOutlineModal,
    setShowPlaceShapeModal,
    setShowSlopeSettingModal,
    setShowPlaceShapeDrawingModal,
    setShowRoofShapeSettingModal,
    setShowRoofShapePassivitySettingModal,
    setShowAuxiliaryModal,
    setShowEavesGableEditModal,
  }

  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,
  }

  const gridColorProps = {
    setShowColorPickerModal,
  }

  const propertiesSettingProps = {
    setShowPropertiesSettingModal,
  }

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

  return (
    <>
      <div className="canvas-wrap">
        <CanvasMenu {...modalProps} />
        <div className="canvas-content">
          <CanvasLayout />
          {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
          {showOutlineModal && <WallLineSetting {...outlineProps} />}
          {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
          {showColorPickerModal && <GridColorSetting {...gridColorProps} />}
          {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
          {showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
          {showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
          {showRoofShapePassivitySettingModal && (
            <RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
          )}
          {showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
          {showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
          {showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
          {showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
          {/*<Movement />*/}
        </div>
      </div>
    </>
  )
}