import WithDraggable from "@/components/common/draggable/withDraggable";
import Qselect from "@/components/common/select/Qselect";
import { useState } from "react";

const SelectOption01 = [
    {name: 'M',}, {name: 'M'}, {name: 'M'}, {name: 'M'}
]

export default function DrawingFlow(){
    const [compasDeg, setCompasDeg] = useState(0);
    return(
        <WithDraggable isShow={true}>
            <div className={`modal-pop-wrap ml`}>
                <div className="modal-head handle">
                    <h1 className="title">面フローの設定 </h1>
                    <button className="modal-close">닫기</button>
                </div>
                <div className="modal-body">
                    <div className="drawing-flow-wrap">
                        <div className="discrimination-box">
                            <div className="discrimination-tit mb15">流れ方向の設定</div>
                            <div className="guide">流れ方向を選択してください。</div>
                            <div className="object-direction-wrap">
                                <div className="plane-direction">
                                    <span className="top">北</span>
                                    <span className="right">ドン</span>
                                    <span className="bottom">南</span>
                                    <span className="left">立つ</span>
                                    <button className="plane-btn up"></button>
                                    <button className="plane-btn right"></button>
                                    <button className="plane-btn down act"></button>
                                    <button className="plane-btn left"></button>
                                </div>
                            </div>
                        </div>
                        <div className="discrimination-box">
                            <div className="discrimination-tit mb15">方位設定</div>
                            <div className="guide">シミュレーション計算の方向を指定します。面が向いている方位を選択してください。</div>
                            <div className="mb-box">
                                <div className="d-check-radio pop mb15">
                                    <input type="radio" name="radio01" id="ra01" />
                                    <label htmlFor="ra01">8方位に選ぶ</label>
                                </div>
                                <div className="grid-select ">
                                    <Qselect title={'M'} option={SelectOption01}/>
                                </div>
                            </div>
                            <div className="mb-box">
                                <div className="d-check-radio pop">
                                    <input type="radio" name="radio02" id="ra02" />
                                    <label htmlFor="ra02">24方位から選択する (表記は8方位です。)</label>
                                </div>
                            </div>
                            <div className="draw-flow-wrap">
                                <div className="compas-box">
                                    <div className="compas-box-inner">
                                        <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>13</i></div>
                                        <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}><i>12</i></div>
                                        <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}><i>11</i></div>
                                        <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}><i>10</i></div>
                                        <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}><i>9</i></div>
                                        <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}><i>8</i></div>
                                        <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>7</i></div>
                                        <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}><i>6</i></div>
                                        <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}><i>5</i></div>
                                        <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}><i>4</i></div>
                                        <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}><i>3</i></div>
                                        <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}><i>2</i></div>
                                        <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>1</i></div>
                                        <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}><i>24</i></div>
                                        <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}><i>23</i></div>
                                        <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}><i>22</i></div>
                                        <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}><i>21</i></div>
                                        <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}><i>20</i></div>
                                        <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>19</i></div>
                                        <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}><i>18</i></div>
                                        <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}><i>17</i></div>
                                        <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}><i>16</i></div>
                                        <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}><i>15</i></div>
                                        <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}><i>14</i></div>
                                        <div className="compas">
                                            <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
                                        </div>
                                    </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>
    )
}