'use client'

import CanvasLayout from '@/components/canvas/CanvasLayout'
import CanvasMenu from '@/components/canvas/CanvasMenu'
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 OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall'
import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01'
import Footer from '@/components/layout/Footer'
import Header from '@/components/layout/Header'
import { modalState } from '@/store/modalAtom'
import '@/styles/contents.scss'
import { useState } from 'react'
import { useRecoilValue } from 'recoil'

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">
                        <CanvasLayout menuValue={menuValue}/>
                    </div>
                    {modalOption.option && <SettingModal01/>}
                    {modalOption.outerwall && <OuterLineWall/>} 확인용 숨김처리
                    {modalOption.gridoption && <GridOption/>}
                    {modalOption.gridcopy && <GridCopy/>}
                    {modalOption.gridmove && <GridMove/>}
                </div>
            </div>
        </div>
    )
}