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

const SelectOption01 = [
    {name: '重要負荷接続+室内リモコン',}, {name: '重要負荷接続+室内リモコン'}, {name: '重要負荷接続+室内リモコン'}, {name: '重要負荷接続+室内リモコン'}
]


export default function CircuitStandTab03({setTabNum}){
    const [moduleTab, setModuleTab] = useState(1);
    const [arrayLength, setArrayLength] = useState(3); //module-table-inner의 반복 개수
    return(
        <>
            <div className="properties-setting-wrap outer">
                <div className="circuit-title-sel">
                    <p className="circuit-title">モニターの選択</p>
                    <div className="circuit-sel-wrap">
                        <div className="grid-select mr10">
                            <Qselect title={'電力検出ユニット (モニター付き)'} option={SelectOption01}/>
                        </div>
                        <div className="grid-select ">
                            <Qselect title={'重要負荷接続+室内リモコン'} option={SelectOption01}/>
                        </div>
                    </div>
                </div>
                <div className="slope-wrap">
                    <div className="circuit-overflow">
                        {/* 3개일때 className = by-max */}
                        <div className={`module-table-box ${arrayLength === 3 ? 'by-max': ''}`}>
                        {Array.from({length : arrayLength}).map((_, idx) => (
                            <div key={idx} className="module-table-inner" >
                                <div className="mb-box">
                                    <div className="circuit-table-tit">HQJP-KA55-5</div>
                                    <div className="roof-module-table overflow-y min">
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>シリアル枚数</th>
                                                    <th>総回路数</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr className="on">
                                                    <td className="al-r">10</td>
                                                    <td className="al-r">0</td>
                                                </tr>
                                                <tr>
                                                    <td className="al-r">10</td>
                                                    <td className="al-r">0</td>
                                                </tr>
                                                <tr >
                                                    <td className="al-r">10</td>
                                                    <td className="al-r">0</td>
                                                </tr>
                                                <tr>
                                                    <td className="al-r">10</td>
                                                    <td className="al-r">0</td>
                                                </tr>
                                                <tr>
                                                    <td className="al-r">10</td>
                                                    <td className="al-r">0</td>
                                                </tr>
                                                <tr>
                                                    <td className="al-r">10</td>
                                                    <td className="al-r">0</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                    <div className="module-box-tab mb10">
                                        <button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>接続する</button>
                                        <button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>昇圧オプション</button>
                                    </div>
                                <div className="circuit-table-flx-wrap">
                                    {moduleTab === 1 && 
                                        <div className="circuit-table-flx-box">
                                            <div className="roof-module-table min mb10">
                                                <table>
                                                    <thead>
                                                        <tr>
                                                            <th>名称</th>
                                                            <th>回路数</th>
                                                            <th>昇圧回路数</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td className="al-c">KTN-CBD4C</td>
                                                            <td className="al-r">4</td>
                                                            <td className="al-r">0</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    }
                                    {moduleTab === 2 && 
                                        <div className="circuit-table-flx-box">
                                            <div className="roof-module-table min mb10">
                                                <table>
                                                    <thead>
                                                        <tr>
                                                            <th>名称</th>
                                                            <th>昇圧回路数</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td className="al-c">-</td>
                                                            <td className="al-c">-</td>
                                                        </tr>                                                    
                                                    </tbody>
                                                </table>
                                            </div>
                                            
                                        </div>
                                    }
                                </div>
                            </div>
                        ))}
                        </div>
                    </div>
                </div>
            </div>
            <div className="grid-btn-wrap">
                <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>以前</button>
                <button className="btn-frame modal act">保存&#40;仮代割当&#41;</button>
            </div>
        </>
    )
}