'use client'
import { useState } from "react";
import Qselect from "../common/select/Qselect";
import MenuDepth01 from "./MenuDepth01";

export default function CanvasMenu({setModalOpen}) {
    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)
        }
    }
    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 === 1 || menuNumber === 2 || menuNumber === 3 || menuNumber === 4) &&
                        <>
                            <div className="btn-from">
                                <button className="btn01 "></button>
                                <button className="btn02 active"></button>
                                <button className="btn03"></button>
                            </div>
                            <div className={`vertical-horizontal ${vertical ? 'on':''}`}>
                                <span>垂直水平モード</span>
                                <button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
                            </div>
                            <div className="select-box">
                                <Qselect title={'瓦53A'} option={SelectOption}/>
                            </div>
                            <div className="btn-from">
                                <button className="btn04" onClick={() => setModalOpen('option')}></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="btn07"></button>
                                <button className="btn08"></button>
                                <button className="btn09"></button>
                            </div>
                        </>
                    }
                    
                </div>
            </div>
            <div className={`canvas-depth2-wrap ${(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) ? 'active' : ''}`}>
                {menuNumber === 2 && <MenuDepth01 setModalOpen={setModalOpen}/>}
                {menuNumber === 3 && <MenuDepth01/>}
                {menuNumber === 4 && <MenuDepth01/>}
            </div>
        </div>
    )
}