'use client'

import { useState } from "react"
import CanvasFrame from "./CanvasFrame";
import CanvasEstimate from "./CanvasEstimate";
import CanvasSimulator from "./CanvasSimulator";

export default function CanvasLayout ({menuValue}) {
    const [plans, setPlans] = useState([{ id: 0, name: 'Plan 1' }, { id: 1, name: 'Plan 2' }, { id: 2, name: 'Plan 3' }]);
    const [idxNum, setIdxNum] = useState(null);

    const onClickPlane = (num) => {
        setIdxNum(num);
    }

    const handleDeletePlan = (e, id) => {
        e.stopPropagation(); // 이벤트 버블링 방지
        setPlans(plans.filter(plan => plan.id !== id)); // 삭제할 아이디와 다른 아이템만 남김
    }

    const addNewPlan = () => {
        setPlans([...plans, { id: plans.length, name: `Plan ${plans.length + 1}` }]);
    }

    return(
        <div className="canvas-layout">
            <div className={`canvas-page-list ${(menuValue === 2 || menuValue === 3 || menuValue === 4) ? 'active' : ""}`}>
                <div className="canvas-id">RT01250306004</div>
                <div className="canvas-plane-wrap">
                    {plans.map((plan, idx) => (
                        <button 
                            key={plan.id} 
                            className={`canvas-page-box ${idx === idxNum ? 'on' : ''}`} 
                            onClick={() => onClickPlane(idx)}
                        >
                            <span>{plan.name}</span>
                            <i className="close" onClick={(e) => handleDeletePlan(e, plan.id)}></i>
                        </button>
                    ))}
                </div>
                <button className="plane-add" onClick={addNewPlan}>
                    <span></span>
                </button>
            </div>
            {menuValue !== 5 && menuValue !== 6 && <CanvasFrame/>}
            {menuValue === 5 && <CanvasEstimate/>}
            {menuValue === 6 && <CanvasSimulator/>}
        </div>
    )
}