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

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

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

    return(
        <WithDraggable isShow={true} size={'r'}>
                <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="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 className="d-check-radio pop">
                                    <input type="radio" name="radio01" id="ra03" onChange={HandleRadioChange} value={3} checked={radioNum === 3}/>
                                    <label htmlFor="ra03">両側に減る</label>
                                </div>
                                <div className="d-check-radio pop">
                                    <input type="radio" name="radio01" id="ra04" onChange={HandleRadioChange} value={4} checked={radioNum === 4}/>
                                    <label htmlFor="ra04">減らさない</label>
                                </div>
                            </div>
                            <div className="additional-img-wrap">
                                {radioNum === 1 &&
                                    <Image src="/static/images/canvas/additional_del01.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                                }
                                {radioNum === 2 &&
                                    <Image src="/static/images/canvas/additional_del02.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                                }
                                {radioNum === 3 &&
                                    <Image src="/static/images/canvas/additional_del03.svg" alt="react" width={0} height={0} style={{width: 'auto', height:'auto'}}/>
                                }
                                {radioNum === 4 &&
                                    <Image src="/static/images/canvas/additional_del04.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>
                            </div>
                        </div>
                    </div>
                    <div className="grid-btn-wrap">
                        <button className="btn-frame modal act">保存</button>
                    </div>
                </div>
                <div className="modal-foot handle"></div>
        </WithDraggable>
    )
}