'use client'
import { useEffect, useState } from "react";
import Qselect from "../common/select/Qselect";
import MenuDepth01 from "./MenuDepth01";
import { useRecoilState } from "recoil";
import { modalState } from "@/store/modalAtom";
import MenuDepth02 from "./MenuDepth02";
import MenuDepth03 from "./MenuDepth03";


export default function CanvasMenu({setMenuValue}) {
    const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state
    const [menuNumber, setMenuNumber] = useState(null);
    const [vertical, setVertical] = useState(true);

    const SelectOption = [
        {name: '瓦53A',}, {name: '瓦53A'}
    ]
    const onClickNav = (number) => {
        setMenuNumber(number)
        if(menuNumber === number){
            setMenuNumber(null)
        }
    }
    useEffect(() => {
        setMenuValue(menuNumber);
    }, [menuNumber])
    return(
        <div className={`canvas-menu-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ""}`}>
            <div className="canvas-menu-inner">
                <ul className="canvas-menu-list">
                    <li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
                        <button><span className="menu-icon con00"></span>配置面 初期設定</button>
                    </li>
                    <li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
                        <button><span className="menu-icon con01"></span>配置面 初期設定</button>
                    </li>
                    <li className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`} onClick={() => onClickNav(2)}>
                        <button><span className="menu-icon con02"></span>配置面 初期設定</button>
                    </li>
                    <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
                        <button><span className="menu-icon con03"></span>配置面</button>
                    </li>
                    <li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
                        <button><span className="menu-icon con04"></span>モジュール回路構成</button>
                    </li>
                    <li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
                        <button><span className="menu-icon con06"></span>見積</button>
                    </li>
                    <li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
                        <button><span className="menu-icon con05"></span>発展シミュレーション</button>
                    </li>
                </ul>
                <div className="canvas-side-btn-wrap">
                    {(menuNumber !== 6 && menuNumber !== 5) &&
                        <>
                            <div className={`vertical-horizontal ${vertical ? 'on':''}`}>
                                <span>垂直水平モード</span>
                                <button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
                            </div>
                            <div className="btn-from">
                                <button className="btn01"></button>
                                <button className="btn02 active"></button>
                                <button className="btn03 "></button>
                            </div>
                            <div className="select-box">
                                <Qselect title={'瓦53A'} option={SelectOption}/>
                            </div>
                            <div className="btn-from">
                                <button className="btn10"></button>
                                <button className="btn04" onClick={() => setModalOption({...modalOption, option: true})}></button>
                                <button className="btn05"></button>
                                <button className="btn06"></button>
                            </div>
                            <div className="size-control">
                                <button className="control-btn minus"></button>
                                <span>100%</span>
                                <button className="control-btn plus"></button>
                            </div>
                            <div className="btn-from">
                                <button className="btn08"></button>
                                <button className="btn09"></button>
                            </div>
                        </>}

                    {(menuNumber === 5) && 
                        <>
                            <div className="ico-btn-from">
                                <button className="btn-frame gray ico-flx act">
                                    <span className="ico ico01"></span>
                                    <span className="name">屋根面の割り当て</span>
                                </button>
                                <button className="btn-frame gray ico-flx">
                                    <span className="ico ico02"></span>
                                    <span className="name">保存</span>
                                </button>
                                <button className="btn-frame gray ico-flx">
                                    <span className="ico ico03"></span>
                                    <span className="name">初期化 </span>
                                </button>
                                <button className="btn-frame gray ico-flx">
                                    <span className="ico ico04"></span>
                                    <span className="name">コピー</span>
                                </button>
                            </div>
                        </>
                    }
                    {(menuNumber === 6) && 
                        <>
                            <div className="ico-btn-from form06">
                                <button className="btn-frame gray ico-flx">
                                    <span className="ico ico01"></span>
                                    <span className="name">Excel</span>
                                </button>
                                <button className="btn-frame gray ico-flx">
                                    <span className="ico ico01"></span>
                                    <span className="name">PDF</span>
                                </button>
                            </div>
                        </>
                    }
                </div>
            </div>
            <div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>
                {menuNumber === 2 && <MenuDepth01/>}
                {menuNumber === 3 && <MenuDepth02/>}
                {menuNumber === 4 && <MenuDepth03/>}
            </div>
        </div>
    )
}