'use client'

import Image from "next/image";
import { useState } from "react"

export default function RoofModuleOptionTab03({setTabNum}){
    const [useTab, setUseTab] = useState(false);
    const [numValue, setNumValue] = useState(1);

    return(
        <>
            <div className="module-table-flex-wrap">
                <div className="module-table-box">
                    <div className="module-table-inner">
                        <div className="roof-module-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th style={{width: '70px'}}>
                                            <div className="d-check-box no-text pop">
                                                <input type="checkbox" id="ch01" disabled/>
                                                <label htmlFor="ch01"></label>
                                            </div>
                                        </th>
                                        <th >モジュール</th>
                                        <th style={{width: '70px'}}>混合可否</th>
                                        <th style={{width: '70px'}}>単数</th>
                                        <th style={{width: '70px'}}>熱水</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td className="al-c">
                                            <div className="d-check-box no-text pop">
                                                <input type="checkbox" id="ch02" />
                                                <label htmlFor="ch02"></label>
                                            </div>
                                        </td>
                                        <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-c">Y</td>
                                        <td className="al-r">
                                            <div className="input-grid" >
                                                <input type="text" className="input-origin block" defaultValue={13}/>
                                            </div>
                                        </td>
                                        <td className="al-r">
                                            <div className="input-grid" >
                                                <input type="text" className="input-origin block" defaultValue={13}/>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td className="al-c">
                                            <div className="d-check-box no-text pop">
                                                <input type="checkbox" id="ch03"/>
                                                <label htmlFor="ch03"></label>
                                            </div>
                                        </td>
                                        <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-c">Y</td>
                                        <td className="al-r">
                                            <div className="input-grid" >
                                                <input type="text" className="input-origin block" defaultValue={13}/>
                                            </div>
                                        </td>
                                        <td className="al-r">
                                            <div className="input-grid" >
                                                <input type="text" className="input-origin block" defaultValue={13}/>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                    </div>
                </div>
                <div className="module-table-box non-flex">
                    <div className="module-table-inner">
                        <div className="roof-module-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>千鳥配置</th>
                                        <th>配置基準</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div className="hexagonal-radio-wrap">
                                                <div className="d-check-radio pop mb10">
                                                    <input type="radio" name="radio02" id="ra03" />
                                                    <label htmlFor="ra03">する</label>
                                                </div>
                                                <div className="d-check-radio pop">
                                                    <input type="radio" name="radio02" id="ra04" />
                                                    <label htmlFor="ra04">しない</label>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div className="hexagonal-radio-wrap">
                                                <div className="d-check-radio pop mb10">
                                                    <input type="radio" name="radio03" id="ra05" />
                                                    <label htmlFor="ra05">軒側</label>
                                                </div>
                                                <div className="d-check-radio pop">
                                                    <input type="radio" name="radio03" id="ra06" />
                                                    <label htmlFor="ra06">棟側</label>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {/* 2025-05-30 st */}
            <div className="hide-tab-wrap">
                <div className="hide-check-guide">
                    モジュール配置案内
                    <button className={`arr ${useTab ? 'act' : ''}`} onClick={() => setUseTab(!useTab)}></button>
                </div>
                <div className={`hide-tab-contents ${useTab ? 'hide' : ''}`}>
                    <div className="roof-content-tab-wrap">
                        <button className={`btn-frame block modal mr5 ${numValue === 1 ? 'act' : ''}`} onClick={() => setNumValue(1)}>
                            千鳥配置を手動で行う際の注意事項
                        </button>
                        <button className={`btn-frame block modal ${numValue === 2 ? 'act' : ''} `} onClick={() => setNumValue(2)}>
                            屋根材別 単一・混合モジュールの最大段数
                        </button>
                    </div>
                    {numValue === 1 &&
                        <div className={`roof-warning-wrap mt10`}>
                            <div className="guide">千鳥配置する時に図のような配置ができてしまいますが、正常な積算ができません。<br/>千鳥で配置する時は、千鳥配置を「する」にして、モジュールが吸着されるようにして下さい。</div>
                            <div className="roof-warning-img-wrap">
                                <div className="roof-warning-img">
                                    <Image src={'/static/images/canvas/roof_warning_correct.png'} width={350} height={198} alt="" />
                                </div>
                                <div className="roof-warning-img">
                                    <Image src={'/static/images/canvas/roof_warning_wrong.png'} width={350} height={198} alt="" />
                                </div>
                            </div>
                        </div>
                    }
                    {numValue === 2 && 
                        <div className={`module-table-box mt10`}>
                            <div className="module-table-inner">
                                <div className="roof-module-table">
                                    <table>
                                        <thead>
                                            <tr>
                                                <th rowSpan={2} style={{width: '22%'}}></th>
                                                <th>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
                                                        <span className="name">Re.RISE-G3 440</span>
                                                    </div>
                                                </th>
                                                <th>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#67A2AA'}}></span>
                                                        <span className="name">Re.RISE MS-G3 290</span>
                                                    </div>
                                                </th>
                                                <th>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#AA6768'}}></span>
                                                        <span className="name">Re.RISE-G3 440</span>
                                                    </div>
                                                </th>
                                                <th></th>
                                            </tr>
                                            <tr>
                                                <th>最大段数</th>
                                                <th>最大段数</th>
                                                <th>最大段数</th>
                                                <th>2種混合最大段数</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#FFFF00'}}></span>
                                                        <span className="name">アスファルトシングル</span>
                                                    </div>
                                                </td>
                                                <td className="al-r">7</td>
                                                <td className="al-r">5</td>
                                                <td className="al-r">5</td>
                                                <td className="al-r">5</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#FFC000'}}></span>
                                                        <span className="name">アスファルトシングル</span>
                                                    </div>
                                                </td>
                                                <td className="al-r">7</td>
                                                <td className="al-r">5</td>
                                                <td className="al-r">5</td>
                                                <td className="al-r">5</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#7030A0'}}></span>
                                                        <span className="name">アスファルトシングル</span>
                                                    </div>
                                                </td>
                                                <td className="al-r">7</td>
                                                <td className="al-r">5</td>
                                                <td className="al-r">5</td>
                                                <td className="al-r">5</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <div className="color-wrap">
                                                        <span className="color-box" style={{backgroundColor: '#385723'}}></span>
                                                        <span className="name">アスファルトシングル</span>
                                                    </div>
                                                </td>
                                                <td className="al-r">7</td>
                                                <td className="al-r">5</td>
                                                <td className="al-r">5</td>
                                                <td className="al-r">5</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
            {/* 2025-05-30 ed */}
            <div className="grid-btn-wrap">
                <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>前に戻る</button>
                <button className="btn-frame modal mr5">単数指定配置</button>
                <button className="btn-frame modal mr5">段·列数指定自動配置</button>
                <button className="btn-frame modal mr5">手動配置</button>
                <button className="btn-frame modal act">自動配置</button>
            </div>
        </>
    )
}