import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'

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

export default function PowerConditionalSelect({ setTabNum }) {
  const { getMessage } = useMessage()
  const [selectedRowIndex, setSelectedRowIndex] = useState(null)
  const [powerConditions, setPowerConditions] = useState([])
  const seriesData = {
    header: [
      { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
      {
        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
        width: '10%',
        prop: 'ratedOutput',
      },
      {
        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`,
        width: '10%',
        prop: 'circuitAmount',
      },
      {
        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`,
        width: '10%',
        prop: 'maxConnection',
      },
      {
        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.overload')}`,
        width: '10%',
        prop: 'maxOverload',
      },
      {
        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.output.current')}`,
        width: '10%',
        prop: 'outputCurrent',
      },
    ],
    rows: [
      {
        name: { name: 'PCSオプションマスター', color: '#AA6768' },
        ratedOutput: { name: '2' },
        circuitAmount: { name: '2' },
        maxConnection: { name: '-' },
        maxOverload: { name: '-' },
        outputCurrent: { name: '-' },
      },
      {
        name: { name: 'HQJP-KA40-5', color: '#AA6768' },
        ratedOutput: { name: '2' },
        circuitAmount: { name: '2' },
        maxConnection: { name: '-' },
        maxOverload: { name: '-' },
        outputCurrent: { name: '-' },
      },
      {
        name: { name: 'Re.RISE-G3 440', color: '#AA6768' },
        ratedOutput: { name: '2' },
        circuitAmount: { name: '2' },
        maxConnection: { name: '-' },
        maxOverload: { name: '-' },
        outputCurrent: { name: '-' },
      },
    ],
  }
  return (
    <>
      <div className="outline-form mb15">
        <span className="mr10">分類 (余剰)</span>
        <div className="grid-select mr10">
          <QSelectBox title={'HQJPシリーズ'} option={SelectOption01} />
        </div>
        <span className="thin">寒冷地仕様</span>
      </div>
      <div className="module-table-box mb10">
        <div className="module-table-inner">
          <div className="circuit-check-inner">
            <div className="d-check-box pop mb15 sel">
              <input type="checkbox" id="ch01" />
              <label htmlFor="ch01">屋内PCS（HQJP-KA-5シリーズ）</label>
            </div>
            <div className="d-check-box pop sel">
              <input type="checkbox" id="ch02" />
              <label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label>
            </div>
          </div>
        </div>
      </div>
      <div className="module-table-box mb15">
        <div className="module-table-inner">
          <div className="x-scroll-table mb10">
            <div className="roof-module-table">
              <table>
                <thead>
                  <tr>
                    {seriesData.header.map((header) => (
                      <th key={header.prop} style={{ width: header.width }}>
                        {header.name}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {seriesData.rows.map((row, index) => (
                    <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
                      {seriesData.header.map((header) => (
                        <td>{row[header.prop].name}</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
          <div className="circuit-right-wrap mb10">
            <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
          </div>
          <div className="circuit-data-form">
            <span className="normal-font">
              HQJP-KA40-5 <button className="del"></button>
            </span>
            <span className="normal-font">
              HQJP-KA40-5 <button className="del"></button>
            </span>
            <span className="normal-font">
              HQJP-KA40-5 <button className="del"></button>
            </span>
          </div>
        </div>
      </div>
      <div className="slope-wrap">
        <div className="d-check-box pop mb15">
          <input type="checkbox" id="ch03" />
          <label htmlFor="ch03"> {getMessage('modal.circuit.trestle.setting.power.conditional.select.check1')}</label>
        </div>
        <div className="d-check-box pop">
          <input type="checkbox" id="ch04" />
          <label className="red" htmlFor="ch04">
            {getMessage('modal.circuit.trestle.setting.power.conditional.select.check2')}
          </label>
        </div>
      </div>
    </>
  )
}