import WithDraggable from "@/components/common/draggable/withDraggable";
import Image from "next/image";
import { useState } from "react";

export default function AdditionalColumnEdit(){
    const [radioNum, setRadioNum] = useState(1)

    const HandleRadioChange = (e) => {
        setRadioNum(Number(e.target.value))
    }

    return(
        <WithDraggable isShow={true}>
            <div className={`modal-pop-wrap r`}>
                <div className="modal-head handle">
                    <h1 className="title">列の挿入 </h1>
                    <button className="modal-close">닫기</button>
                </div>
                <div className="modal-body">
                    <div className="properties-setting-wrap">
                        <div className="setting-tit">挿入する方向を選択してください。</div>
                        <div className="additional-wrap">
                            <div className="additional-radio-wrap">
                                <div className="d-check-radio pop">
                                    <input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={radioNum === 1}/>
                                    <label htmlFor="ra01">左挿入</label>
                                </div>
                                <div className="d-check-radio pop">
                                    <input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={radioNum === 2}/>
                                    <label htmlFor="ra02">右挿入</label>
                                </div>
                            </div>
                            <div className="additional-img-wrap">
                                {radioNum === 1 &&
                                    <Image src="/static/images/canvas/additional-edit01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                                }
                                {radioNum === 2 &&
                                    <Image src="/static/images/canvas/additional-edit02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                                }
                            </div>
                        </div>
                    </div>
                    <div className="properties-setting-wrap">
                        <div className="setting-tit">凡例</div>
                        <div className="module-table-box">
                            <div className="module-table-inner">
                                <div className="additional-color-wrap">
                                    <div className="additional-color-box">
                                        <span className="additional-color pink"></span>
                                        <span className="normal-font">選択列</span>
                                    </div>
                                    <div className="additional-color-box">
                                        <span className="additional-color white"></span>
                                        <span className="normal-font">選択列</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="grid-btn-wrap">
                        <button className="btn-frame modal act">保存</button>
                    </div>
                </div>
                <div className="modal-foot handle"></div>
            </div>
        </WithDraggable>
    )
}