import { useMessage } from '@/hooks/useMessage'

export default function PitchPlacement() {
  const { getMessage } = useMessage()
  const moduleData = {
    header: [
      { type: 'check', name: '', prop: 'check', width: 70 },
      { type: 'color-box', name: getMessage('module'), prop: 'module' },
      { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
    ],
    rows: [
      {
        check: false,
        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
        output: { name: '440' },
      },
      {
        check: false,
        module: {
          name: 'Re.RISE MS-G3 290',
          color: '#67A2AA',
        },
        output: { name: '240' },
      },
    ],
  }
  return (
    <>
      <div className="module-table-box mb10">
        <div className="module-table-inner">
          <div className="roof-module-table">
            <table>
              <thead>
                <tr>
                  {moduleData.header.map((data) => (
                    <th key={data.prop} style={{ width: data.width ? data.width : '' }}>
                      {data.type === 'check' ? (
                        <div className="d-check-box no-text pop">
                          <input type="checkbox" id="ch01" disabled />
                          <label htmlFor="ch01"></label>
                        </div>
                      ) : (
                        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 === 'check' && (
                            <td className="al-c">
                              <div className="d-check-box no-text pop">
                                <input type="checkbox" id="ch02" />
                                <label htmlFor="ch02"></label>
                              </div>
                            </td>
                          )}
                          {header.type && header.type !== 'color-box' && header.type !== 'check' && <td className="al-r">{row[header.prop].name}</td>}
                        </>
                      ))}
                    </tr>
                  </>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div className="module-table-box mb10">
        <div className="module-table-inner">
          <div className="hexagonal-wrap">
            <div className="hexagonal-item">
              <div className="bold-font">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting')}</div>
            </div>
            <div className="hexagonal-item">
              <div className="pop-form-radio">
                <div className="d-check-radio pop">
                  <input type="radio" name="radio01" id="ra01" />
                  <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
                </div>
                <div className="d-check-radio pop">
                  <input type="radio" name="radio01" id="ra02" />
                  <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="module-table-box">
        <div className="module-table-inner">
          <div className="hexagonal-wrap">
            <div className="hexagonal-item">
              <div className="bold-font">割り当て設定</div>
            </div>
            <div className="hexagonal-item">
              <div className="hexagonal-flx-auto">
                <div className="outline-form">
                  <span className="mr10" style={{ width: 'auto' }}>
                    {getMessage('modal.module.basic.setting.pitch.module.row.amount')}
                  </span>
                  <div className="input-grid mr5" style={{ width: '70px' }}>
                    <input type="text" className="input-origin block" defaultValue={1} />
                  </div>
                  <span className="thin">mm</span>
                </div>
                <div className="outline-form">
                  <span className="mr10" style={{ width: 'auto' }}>
                    {getMessage('modal.module.basic.setting.pitch.module.row.margin')}
                  </span>
                  <div className="input-grid mr5" style={{ width: '70px' }}>
                    <input type="text" className="input-origin block" defaultValue={1} />
                  </div>
                  <span className="thin">mm</span>
                </div>
                <div className="outline-form">
                  <span className="mr10" style={{ width: 'auto' }}>
                    {getMessage('modal.module.basic.setting.pitch.module.column.amount')}
                  </span>
                  <div className="input-grid mr5" style={{ width: '70px' }}>
                    <input type="text" className="input-origin block" defaultValue={1} />
                  </div>
                  <span className="thin">mm</span>
                </div>
                <div className="outline-form">
                  <span className="mr10" style={{ width: 'auto' }}>
                    {getMessage('modal.module.basic.setting.pitch.module.column.margin')}
                  </span>
                  <div className="input-grid mr5" style={{ width: '70px' }}>
                    <input type="text" className="input-origin block" defaultValue={300} />
                  </div>
                  <span className="thin">mm</span>
                </div>
              </div>
            </div>
            <div className="hexagonal-item">
              <div className="hexagonal-flx">
                <div className="normal-font">{getMessage('modal.module.basic.setting.pitch.module.allocation.setting.info')}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}