'use client'

import CanvasLayout from '@/components/canvas/CanvasLayout'
import CanvasMenu from '@/components/canvas/CanvasMenu'
import ArrangementSetting from '@/components/canvas/modal/arrangementsetting/ArrangementSetting'
import AuxiliarylineOption from '@/components/canvas/modal/auxiliarylineoprion/AuxiliarylineOption'
import AuxiliaryCopy from '@/components/canvas/modal/auxiliarysupport/AuxiliaryCopy'
import AuxiliaryMove from '@/components/canvas/modal/auxiliarysupport/AuxiliaryMove'
import AuxiliarySize from '@/components/canvas/modal/auxiliarysupport/AuxiliarySize'
import DisplayChange from '@/components/canvas/modal/displaychange/DisplayChange'
import DistanceMeasurement01 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement01'
import DistanceMeasurement02 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement02'
import DistanceMeasurement03 from '@/components/canvas/modal/distancemeasurement/DistanceMeasurement03'
import DrawingFlow from '@/components/canvas/modal/drawingflow/DrawingFlow'
import EachPropertyChange from '@/components/canvas/modal/eachpropertychange/EachPropertyChange'
import EvaseKerabaOption from '@/components/canvas/modal/eaves_keraba/EavesKerabaOption'
import GridCopy from '@/components/canvas/modal/gridoption/GridCopy'
import GridMove from '@/components/canvas/modal/gridoption/GridMove'
import GridOption from '@/components/canvas/modal/gridoption/GridOption'
import ManualRoofShape from '@/components/canvas/modal/manualroofshape/ManualRoofShape'
import MovingUpDonw from '@/components/canvas/modal/movingupdown/MovingUpDown'
import ObjectOption from '@/components/canvas/modal/objectoption/ObjectOption'
import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
import OuterWallOffset from '@/components/canvas/modal/outerwalloffset/OuterWallOffset'
import PlacementSettingPop from '@/components/canvas/modal/placementsetting/PlacementSettingPop'
import PlaneShapeOption from '@/components/canvas/modal/planeshapeoption/PlaneShapeOption'
import PropertiesSetting from '@/components/canvas/modal/propertiessetting/PropertiesSetting'
import RoofAllocation from '@/components/canvas/modal/roofallocation/RoofAllocation'
import RoofShapeOption from '@/components/canvas/modal/roofshapeoption/RoofShapeOption'
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
import SlopeOption from '@/components/canvas/modal/slopeoption/SlopeOption'
import Penal02 from '@/components/canvas/penal/Penal02'
import Penal01 from '@/components/canvas/penal/Penal01'
import Header from '@/components/layout/Header'
import { modalState } from '@/store/modalAtom'
import '@/styles/contents.scss'
import '@/styles/grid.scss'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
import Penal03 from '@/components/canvas/penal/Penal03'
import Penal04 from '@/components/canvas/penal/Penal04'
import RoofModuleOption from '@/components/canvas/modal/roofmoduleoption/RoofModuleOption'
import HexagonalRoofOption from '@/components/canvas/modal/hexagonalroofoption/HexagonalRoofOption'
import CircuitStandSetting from '@/components/canvas/modal/circuitstandsetting/CircuitStandSetting'
import AdditionalMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalMove'
import AdditionalCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalCopy'
import AdditionalColumnCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnCopy'
import AdditionalColumnMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalColumnMove'
import AdditionalBundleMove from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleMove'
import AdditionalBundleCopy from '@/components/canvas/modal/additionalfunction/additionoption/AdditionalBundleCopy'
import AllModuleMove from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleMove'
import AllModuleCopy from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleCopy'
import AllModuleNumChange from '@/components/canvas/modal/additionalfunction/additionoption/AllModuleNumChange'
import AdditionalColumnDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnDelete'
import AdditionalColumnEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit'
import AdditionalBundleDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete'
import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit'
import CanvasContextMenu from '@/components/canvas/CanvasContextMenu'
import ColorSelect from '@/components/canvas/modal/colorselect/ColorSelect'
import FontOption from '@/components/canvas/modal/font_lineoption/FontOption'
import LineOption from '@/components/canvas/modal/font_lineoption/LineOption'
import ShapeSizeOption from '@/components/canvas/modal/font_lineoption/ShapeSizeOption'
import RoofSelect from '@/components/canvas/modal/roofselect/RoofSelect'
import SizeChange from '@/components/canvas/modal/sizechange/SizeChang'
import Footer from '@/components/layout/Footer'
import ImageSize from '@/components/canvas/modal/imagesize/ImageSize'
import MeasuredValueOption from '@/components/canvas/modal/measuredvalueoption/MeasuredValueOption'
import ImgLoad from '@/components/canvas/modal/imgload/ImgLoad'

export default function CanvasPage() {
    const modalOption = useRecoilValue(modalState);
    const [menuValue, setMenuValue] = useState(null);
    return(
        <div className="wrap">
            <Header/>
            <div className="content">
                <div className={`canvas-wrap ${menuValue === 5 || menuValue === 6 ? 'sub-wrap' : ''}`}>
                    <CanvasMenu setMenuValue={setMenuValue}/>
                    <div className={`canvas-content ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}>
                        <CanvasLayout menuValue={menuValue}/>
                    </div>
                    {/* 우클릭 context menu */}
                    {/* <CanvasContextMenu/> */}
                    
                    {/* 패널 배치 집계 */}
                    {/* <Penal01/> */}
                    {/* <Penal02/> */}
                    {/* <Penal03/> */}
                    {/* <Penal04/> */}

                    {/* 배치면 초기 설정 */}
                    {/* <PlacementSettingPop/> */}

                    {/* 캔버스 기본 셋팅 */}
                    {/* {modalOption.option && <SettingModal01/>} */}

                    {/* 점·선 그리드 설정 */}
                    {/* {modalOption.gridoption && <GridOption/>} */}
                    {/* {modalOption.gridcopy && <GridCopy/>} */}
                    {/* {modalOption.gridmove && <GridMove/>} */}

                    {/* 외벽선 그리기 */}
                    {/* {modalOption.outerwall && <OuterLineWall/>} */}

                    {/* 외벽선 속성 설정 */}
                    {/* <PropertiesSetting/> */}

                    {/* 지붕형상 설정 */}
                    {/* <RoofShapeOption/> */}

                    {/* 지붕형상 수동 설정 */}
                    {/* <ManualRoofShape/> */}

                    {/* 보조선 작성 */}
                    {/* <AuxiliarylineOption/> */}

                    {/* 처마∙케라바 변경 */}
                    {/* <EvaseKerabaOption/> */}

                    {/* 동선이동∙형 올림 내림 */}
                    {/* <MovingUpDonw/> */}

                    {/* 외벽선 편집 및 오프셋 */}
                    {/* <OuterWallOffset/> */}

                    {/* 보조선 사이즈, 이동, 복사 */}
                    {/* <AuxiliarySize/> */}
                    {/* <AuxiliaryMove/> */}
                    {/* <AuxiliaryCopy/> */}

                    {/* 지붕면 할당 */}
                    {/* <RoofAllocation/> */}

                    {/* 경사 설정 */}
                    {/* <SlopeOption/> */}

                    {/* 배치면 그리기 */}
                    {/* <ArrangementSetting/> */}

                    {/* 면형상 배치 */}
                    {/* <PlaneShapeOption/> */}
                    
                    {/* 오브젝트 배치*/}
                    {/* <ObjectOption/> */}

                    {/* 표시변겅 */}
                    {/* <DisplayChange/> */}

                    {/* 거리측정01, 거리측정02, 거리측정03 */}
                    {/* <DistanceMeasurement01/> */}
                    {/* <DistanceMeasurement02/> */}
                    {/* <DistanceMeasurement03/> */}

                    {/* 각 변 속성 변경 */}
                    {/* <EachPropertyChange/> */}

                    {/* 면 흐름 설정 */}
                    {/* <DrawingFlow/> */}

                    {/* 지붕모듈선택 */}
                    {/* <RoofModuleOption/> */}

                    {/* 육지붕모듈 선택 */}
                    {/* <HexagonalRoofOption/> */}

                    {/* 회로 및 가대설정 */}
                    <CircuitStandSetting/>

                    {/* 모듈 부가기능 */}

                    {/* 이동, 복사, 열이동, 열복사, 단이동, 단복사, 모듈일괄회로번호변경, 모듈일관이동, 모듈일괄복사 */}
                    {/* <AdditionalMove/> */}
                    {/* <AdditionalCopy/> */}
                    {/* <AdditionalColumnMove/> */}
                    {/* <AdditionalColumnCopy/> */}
                    {/* <AdditionalBundleMove/> */}
                    {/* <AdditionalBundleCopy/> */}
                    {/* <AllModuleNumChange/> */}
                    {/* <AllModuleMove/> */}
                    {/* <AllModuleCopy/> */}

                    {/* 열삭제, 열삽입, 단삭제, 단삽입 */}
                    {/* <AdditionalColumnDelete/> */}
                    {/* <AdditionalColumnEdit/> */}
                    {/* <AdditionalBundleDelete/> */}
                    {/* <AdditionalBundleEdit/> */}

                    {/* 색상 팝업 */}
                    {/* <ColorSelect/> */}

                    {/* 글꼴 설정, 치수선 설정 */}
                    {/* <FontOption/> */}
                    {/* <LineOption/> */}
                    {/* <ShapeSizeOption/> */}

                    {/* 지붕재 선택 */}
                    {/* <RoofSelect/> */}

                    {/* 사이즈 변경 */}
                    {/* <SizeChange/> */}

                    {/* 이미지 크기 조절 */}
                    {/* <ImageSize/> */}

                    {/* 실측치 설정 */}
                    {/* <MeasuredValueOption/> */}

                    {/* 이미지 불러오기 */}
                    {/* <ImgLoad/> */}
                </div>
            </div>
            {menuValue === 5 && <Footer/>}
            {menuValue === 6 && <Footer/>}
            
        </div>
    )
}