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

export default function Module({}) {
  const { getMessage } = useMessage()
  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
  const moduleData = {
    header: [
      { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
      {
        name: `${getMessage('높이')}  (mm)`,
        prop: 'height',
      },
      { name: `${getMessage('width')} (mm)`, prop: 'width' },
      { name: `${getMessage('output')} (W)`, prop: 'output' },
    ],
    rows: [
      {
        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
        height: { name: '1134' },
        width: { name: '1722' },
        output: { name: '440' },
      },
      {
        module: {
          name: 'Re.RISE MS-G3 290',
          color: '#67A2AA',
        },
        height: { name: '1134' },
        width: { name: '1722' },
        output: { name: '240' },
      },
    ],
  }
  return (
    <>
      <div className="module-table-flex-wrap mb10">
        <div className="module-table-box">
          <div className="module-table-inner">
            <div className="outline-form mb10">
              <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
              <div className="grid-select">
                <QSelectBox title={'Search'} option={SelectOption01} />
              </div>
            </div>
            <div className="roof-module-table">
              <table>
                <thead>
                  <tr>
                    {moduleData.header.map((data) => (
                      <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
                        {data.name}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {moduleData.rows.map((row) => (
                    <>
                      <tr>
                        {moduleData.header.map((header) => (
                          <>
                            {header.type === 'color-box' && (
                              <td>
                                <div className="color-wrap">
                                  <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
                                  <span className="name">{row[header.prop].name}</span>
                                </div>
                              </td>
                            )}
                            {!header.type && header.type !== 'color-box' && <td className="al-r">{row[header.prop].name}</td>}
                          </>
                        ))}
                      </tr>
                    </>
                  ))}
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div className="module-table-box">
          <div className="module-box-tab">
            <button className="module-btn act">スレート</button>
            <button className="module-btn">平板瓦</button>
            <button className="module-btn">53A</button>
            <button className="module-btn">53A</button>
          </div>
          <div className="module-table-inner">
            <div className="module-table-tit">{getMessage('modal.module.basic.setting.module.roof.material')}: スレーツ（4寸)</div>
            <div className="eaves-keraba-table">
              <div className="eaves-keraba-item">
                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
                <div className="eaves-keraba-td">
                  <div className="grid-select">
                    <QSelectBox title={'屋根技術研究所'} option={SelectOption01} />
                  </div>
                </div>
              </div>
              <div className="eaves-keraba-item">
                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
                <div className="eaves-keraba-td">
                  <div className="grid-select">
                    <QSelectBox title={'スレート金具4'} option={SelectOption01} />
                  </div>
                </div>
              </div>
              <div className="eaves-keraba-item">
                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
                <div className="eaves-keraba-td">
                  <div className="grid-select">
                    <QSelectBox title={'構造溶合板 12mm以上'} option={SelectOption01} />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="module-table-box mb10">
        <div className="module-table-inner">
          <div className="module-table-flex-wrap">
            <div className="outline-form">
              <span className="mr10">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
              <div className="grid-select">
                <QSelectBox title={'Ⅲ ∙ Ⅳ'} option={SelectOption01} />
              </div>
            </div>
            <div className="outline-form">
              <span className="mr10">{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
              <div className="grid-select">
                <QSelectBox title={'13'} option={SelectOption01} />
              </div>
            </div>
            <div className="outline-form">
              <span className="mr10">{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</span>
              <div className="grid-select">
                <QSelectBox title={'32'} option={SelectOption01} />
              </div>
            </div>
            <div className="outline-form">
              <span className="mr10">{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
              <div className="grid-select">
                <QSelectBox title={'15'} option={SelectOption01} />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="module-table-box mb15">
        <div className="warning-guide">
          <div className="warning">
            {getMessage('modal.module.basic.setting.module.setting.info1')}
            <br />
            {getMessage('modal.module.basic.setting.module.setting.info2')}
            <br />
          </div>
        </div>
      </div>
      <div className="modal-btn-wrap mb15">
        <button className="btn-frame roof blue">{getMessage('modal.module.basic.setting.module.standard.construction')}(1)</button>
        <button className="btn-frame roof white">{getMessage('modal.module.basic.setting.module.standard.construction')}</button>
        <button className="btn-frame roof">{getMessage('modal.module.basic.setting.module.enforce.construction')}</button>
        <button className="btn-frame roof">{getMessage('modal.module.basic.setting.module.multiple.construction')}</button>
        <button className="btn-frame roof blue">{getMessage('modal.module.basic.setting.module.multiple.construction')}（II）</button>
      </div>
      <div className="grid-check-form border">
        <div className="d-check-box pop">
          <input type="checkbox" id="ch01" />
          <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
        </div>
        <div className="d-check-box pop">
          <input type="checkbox" id="ch02" />
          <label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
        </div>
      </div>
    </>
  )
}