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

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

export default function RoofModuleOptionTab01({setTabNum}){
    const [compasDeg, setCompasDeg] = useState(0);
    return(
        <>
            <div className="properties-setting-wrap">
                <div className="outline-wrap">
                    <div className="roof-module-inner">
                        <div className="compas-wrapper">
                            <div className="guide">※シミュレーション計算用方位を指定します。南の方位を設定してください。</div>
                            <div className="roof-module-compas">
                                <div className="compas-box">
                                    <div className="compas-box-inner">
                                        <div className={`circle ${compasDeg === 180 ? 'act' : ''}`} onClick={() => setCompasDeg(180)}><i>180°</i></div>
                                        <div className={`circle ${compasDeg === 195 ? 'act' : ''}`} onClick={() => setCompasDeg(195)}></div>
                                        <div className={`circle ${compasDeg === 210 ? 'act' : ''}`} onClick={() => setCompasDeg(210)}></div>
                                        <div className={`circle ${compasDeg === 225 ? 'act' : ''}`} onClick={() => setCompasDeg(225)}></div>
                                        <div className={`circle ${compasDeg === 240 ? 'act' : ''}`} onClick={() => setCompasDeg(240)}></div>
                                        <div className={`circle ${compasDeg === 255 ? 'act' : ''}`} onClick={() => setCompasDeg(255)}></div>
                                        <div className={`circle ${compasDeg === 270 ? 'act' : ''}`} onClick={() => setCompasDeg(270)}><i>-90°</i></div>
                                        <div className={`circle ${compasDeg === 285 ? 'act' : ''}`} onClick={() => setCompasDeg(285)}></div>
                                        <div className={`circle ${compasDeg === 300 ? 'act' : ''}`} onClick={() => setCompasDeg(300)}></div>
                                        <div className={`circle ${compasDeg === 315 ? 'act' : ''}`} onClick={() => setCompasDeg(315)}></div>
                                        <div className={`circle ${compasDeg === 330 ? 'act' : ''}`} onClick={() => setCompasDeg(330)}></div>
                                        <div className={`circle ${compasDeg === 345 ? 'act' : ''}`} onClick={() => setCompasDeg(345)}></div>
                                        <div className={`circle ${compasDeg === 0 ? 'act' : ''}`} onClick={() => setCompasDeg(0)}><i>0°</i></div>
                                        <div className={`circle ${compasDeg === 15 ? 'act' : ''}`} onClick={() => setCompasDeg(15)}></div>
                                        <div className={`circle ${compasDeg === 30 ? 'act' : ''}`} onClick={() => setCompasDeg(30)}></div>
                                        <div className={`circle ${compasDeg === 45 ? 'act' : ''}`} onClick={() => setCompasDeg(45)}></div>
                                        <div className={`circle ${compasDeg === 60 ? 'act' : ''}`} onClick={() => setCompasDeg(60)}></div>
                                        <div className={`circle ${compasDeg === 75 ? 'act' : ''}`} onClick={() => setCompasDeg(75)}></div>
                                        <div className={`circle ${compasDeg === 90 ? 'act' : ''}`} onClick={() => setCompasDeg(90)}><i>90°</i></div>
                                        <div className={`circle ${compasDeg === 105 ? 'act' : ''}`} onClick={() => setCompasDeg(105)}></div>
                                        <div className={`circle ${compasDeg === 120 ? 'act' : ''}`} onClick={() => setCompasDeg(120)}></div>
                                        <div className={`circle ${compasDeg === 135 ? 'act' : ''}`} onClick={() => setCompasDeg(135)}></div>
                                        <div className={`circle ${compasDeg === 150 ? 'act' : ''}`} onClick={() => setCompasDeg(150)}></div>
                                        <div className={`circle ${compasDeg === 165 ? 'act' : ''}`} onClick={() => setCompasDeg(165)}></div>
                                        <div className="compas">
                                            <div className="compas-arr" style={{transform: `rotate(${compasDeg}deg)`}}></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="center-wrap">
                                <div className="outline-form">
                                    <div className="d-check-box pop mr10">
                                        <input type="checkbox" id="ch99" />
                                        <label htmlFor="ch99">角度変更</label>
                                    </div>
                                    <div className="input-grid mr10" style={{width: '60px'}}>
                                        <input type="text" className="input-origin block" defaultValue={315}/>
                                    </div>
                                    <span className="thin" >°</span>
                                    <span className="thin" >（ -180 〜 180 ）</span>
                                </div>
                            </div>
                        </div>
                        <div className="compas-table-wrap">
                            <div className="compas-table-box mb10">
                                <div className="outline-form mb10">
                                    <span className="mr10">モジュールの選択</span>
                                    <div className="grid-select">
                                        <Qselect title={'Search'} option={SelectOption01}/>
                                    </div>
                                </div>
                                <div className="roof-module-table">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th style={{width: '150px'}}>モジュール</th>
                                                <th>高さ (mm)</th>
                                                <th>幅 (mm)</th>
                                                <th>出力 (W)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
                                                        <span className="name">Re.RISE-G3 440</span>
                                                    </div>
                                                </td>
                                                <td className="al-r">1134</td>
                                                <td className="al-r">1722</td>
                                                <td className="al-r">440</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
                                                        <span className="name">Re.RISE MS-G3 290</span>
                                                    </div>
                                                </td>
                                                <td className="al-r">1134</td>
                                                <td className="al-r">1722</td>
                                                <td className="al-r">440</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
                                                        <span className="name">Re.RISE MS-G3 290</span>
                                                    </div>
                                                </td>
                                                <td className="al-r">1134</td>
                                                <td className="al-r">1722</td>
                                                <td className="al-r">440</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div className="compas-table-box">
                                <div className="compas-grid-table">
                                    <div className="outline-form">
                                        <span>綿調道区分</span>
                                        <div className="grid-select">
                                            <Qselect title={'Ⅲ ∙ Ⅳ'} option={SelectOption01}/>
                                        </div>
                                    </div>
                                    <div className="outline-form">
                                        <span>設置高さ</span>
                                        <div className="input-grid mr10" >
                                            <input type="text" className="input-origin block" defaultValue={13}/>
                                        </div>
                                        <span className="thin">m</span>
                                    </div>
                                    <div className="outline-form">
                                        <span>基準風速</span>
                                        <div className="grid-select">
                                            <Qselect title={'32'} option={SelectOption01}/>
                                        </div>
                                    </div>
                                    <div className="outline-form">
                                        <span>垂直積雪量</span>
                                        <div className="input-grid mr10" >
                                            <input type="text" className="input-origin block" defaultValue={13}/>
                                        </div>
                                        <span className="thin">cm</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="grid-btn-wrap">
                <button className="btn-frame modal act" onClick={() => setTabNum(2)}>Next</button>
            </div>
        </>
    )
}