'use client'

import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
import '@/styles/contents.scss'
import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
import { useEffect, useState } from 'react'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'

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

  const canvasSettingProps = {
    setShowCanvasSettingModal,
  }

  const outlineProps = {
    setShowOutlineModal,
  }

  const modalProps = {
    setShowCanvasSettingModal,
    showOutlineModal,
    setShowOutlineModal,
  }

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

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