'use client'

import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { settingModalFirstOptionsState, settingModalGridOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import '@/styles/contents.scss'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
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 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 AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
import { gridColorState } from '@/store/gridAtom'

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 [showPlacementSurfaceSettingModal, setShowPlacementSurfaceSettingModal] = useState(false)
  const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
  const [showObjectSettingModal, setShowObjectSettingModal] = useState(false)
  const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
  const [showMovementModal, setShowMovementModal] = useState(false)
  const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
  const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false)
  const [showBasicSettingModal, setShowBasicSettingModal] = useState(false)
  const [showCircuitTrestleSettingModal, setShowCircuitTrestleSettingModal] = 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 [menuNumber, setMenuNumber] = useState(null)
  const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
  const [showGridCopyModal, setShowGridCopyModal] = useState(false)
  const [showGridMoveModal, setShowGridMoveModal] = useState(false)
  const [color, setColor] = useRecoilState(gridColorState)
  const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)

  const outlineProps = {
    setShowOutlineModal,
    setShowPropertiesSettingModal,
  }

  const modalProps = {
    menuNumber,
    setMenuNumber,
    setShowCanvasSettingModal,
    showOutlineModal,
    setShowOutlineModal,
    setShowPlaceShapeModal,
    setShowSlopeSettingModal,
    setShowPlacementSurfaceSettingModal,
    setShowPlaceShapeDrawingModal,
    setShowRoofShapeSettingModal,
    setShowObjectSettingModal,
    setShowRoofShapePassivitySettingModal,
    setShowAuxiliaryModal,
    setShowEavesGableEditModal,
    setShowMovementModal,
    setShowWallLineOffsetSettingModal,
    setShowRoofAllocationSettingModal,
    setShowBasicSettingModal,
    setShowCircuitTrestleSettingModal,
    setShowPropertiesSettingModal,
  }

  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 propertiesSettingProps = {
    setShowPropertiesSettingModal,
  }

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

  return (
    <>
      <div className="canvas-wrap">
        <CanvasMenu {...modalProps} />
        <div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
          <CanvasLayout menuNumber={menuNumber} />
          {showOutlineModal && <WallLineSetting {...outlineProps} />}
          {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} />}
          {showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
          {showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
          {showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
          {showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
          {showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
          {showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
          {showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
        </div>
      </div>
    </>
  )
}