'use client'

import WithDraggable from "@/components/common/draggable/withDraggable";
import Image from "next/image";
import { useState } from "react";
import PlaneShapeTab01 from "./planeshapetab/PlaneShapeTab01";
import PlaneShapeTab02 from "./planeshapetab/PlaneShapeTab02";
import PlaneShapeTab03 from "./planeshapetab/PlaneShapeTab03";
import PlaneShapeTab04 from "./planeshapetab/PlaneShapeTab04";
import PlaneShapeTab05 from "./planeshapetab/PlaneShapeTab05";
import PlaneShapeTab06 from "./planeshapetab/PlaneShapeTab06";
import PlaneShapeTab07 from "./planeshapetab/PlaneShapeTab07";
import PlaneShapeTab08 from "./planeshapetab/PlaneShapeTab08";
import PlaneShapeTab09 from "./planeshapetab/PlaneShapeTab09";
import PlaneShapeTab10 from "./planeshapetab/PlaneShapeTab10";
import PlaneShapeTab11 from "./planeshapetab/PlaneShapeTab11";
import PlaneShapeTab12 from "./planeshapetab/PlaneShapeTab12";
import PlaneShapeTab13 from "./planeshapetab/PlaneShapeTab13";
import PlaneShapeTab14 from "./planeshapetab/PlaneShapeTab14";
import PlaneShapeTab15 from "./planeshapetab/PlaneShapeTab15";
import PlaneShapeTab16 from "./planeshapetab/PlaneShapeTab16";
import PlaneShapeTab17 from "./planeshapetab/PlaneShapeTab17";
import PlaneShapeTab18 from "./planeshapetab/PlaneShapeTab18";

export default function PlaneShapeOption(){
    const [shapeNum, setShapeNum] = useState(1);

    return(
        <WithDraggable isShow={true} size={'lr-2'}>
                <div className="modal-head handle">
                    <h1 className="title">屋根形状の設定 </h1>
                    <button className="modal-close">닫기</button>
                </div>
                <div className="modal-body">
                <div className="left-bar handle"></div>
                <div className="right-bar handle"></div>
                    <div className="plane-frame-wrap">
                        <div className="plane-shape-wrap">
                            <div className="plane-shape-menu">
                                {Array.from({length : 18}).map((_,idx) => (
                                    <button key={idx + 1} className={`shape-menu-box ${shapeNum === idx + 1 ? 'act': ''}`} onClick={() => setShapeNum(idx + 1)}>
                                        <div className="shape-box">
                                            <Image 
                                            src={`/static/images/canvas/plane_shape0${idx + 1}.svg`} 
                                            alt="react" width={0} height={0} 
                                            style={{
                                                width: 'auto',
                                                height:'auto',
                                            }}/>
                                        </div>
                                    </button>
                                ))}
                            </div>
                            <div className="shape-library">
                                <button className="library-btn ico01"></button>
                                <button className="library-btn ico02"></button>
                                <button className="library-btn ico03"></button>
                            </div>
                        </div>
                        <div className="plane-detail-wrap">
                            {shapeNum === 1 && <PlaneShapeTab01/>}
                            {shapeNum === 2 && <PlaneShapeTab02/>}
                            {shapeNum === 3 && <PlaneShapeTab03/>}
                            {shapeNum === 4 && <PlaneShapeTab04/>}
                            {shapeNum === 5 && <PlaneShapeTab05/>}
                            {shapeNum === 6 && <PlaneShapeTab06/>}
                            {shapeNum === 7 && <PlaneShapeTab07/>}
                            {shapeNum === 8 && <PlaneShapeTab08/>}
                            {shapeNum === 9 && <PlaneShapeTab09/>}
                            {shapeNum === 10 && <PlaneShapeTab10/>}
                            {shapeNum === 11 && <PlaneShapeTab11/>}
                            {shapeNum === 12 && <PlaneShapeTab12/>}
                            {shapeNum === 13 && <PlaneShapeTab13/>}
                            {shapeNum === 14 && <PlaneShapeTab14/>}
                            {shapeNum === 15 && <PlaneShapeTab15/>}
                            {shapeNum === 16 && <PlaneShapeTab16/>}
                            {shapeNum === 17 && <PlaneShapeTab17/>}
                            {shapeNum === 18 && <PlaneShapeTab18/>}
                            <div className="plane-shape-btn">
                                <button className="btn-frame modal act">作成</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="modal-foot handle"></div>
        </WithDraggable>
    )
}