import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useState } from 'react'

const Placement = forwardRef((props, refs) => {
  const { getMessage } = useMessage()
  const [isChidori, setIsChidori] = useState('false')
  const [setupLocation, setSetupLocation] = useState('center')
  const [isMaxSetup, setIsMaxSetup] = useState('false')

  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' },
      },
    ],
  }

  const handleChangeChidori = (e) => {
    setIsChidori(e.target.value)
    refs.isChidori.current = e.target.value
  }

  const handleSetupLocation = (e) => {
    setSetupLocation(e.target.value)
    refs.setupLocation.current = e.target.value
  }

  const handleMaxSetup = (e) => {
    console.log(e.target.checked)

    if (e.target.checked) {
      setIsMaxSetup('true')
      refs.isMaxSetup.current = 'true'
    } else {
      setIsMaxSetup('false')
      refs.isMaxSetup.current = 'false'
    }
  }

  return (
    <>
      <div className="module-table-flex-wrap mb10">
        <div className="module-table-box">
          <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>
                    </>
                  ))}
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div className="module-table-box">
          <div className="module-table-inner">
            <div className="self-table-tit">{getMessage('modal.module.basic.setting.module.placement.select.fitting.type')}</div>
            <div className="module-self-table">
              <div className="self-table-item">
                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.waterfowl.arrangement')}</div>
                <div className="self-item-td">
                  <div className="pop-form-radio">
                    <div className="d-check-radio pop">
                      <input type="radio" name="radio01" id="ra01" checked={isChidori === 'true'} value={'true'} onChange={handleChangeChidori} />
                      <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
                    </div>
                    <div className="d-check-radio pop">
                      <input
                        type="radio"
                        name="radio02"
                        id="ra02"
                        value={'false'}
                        defaultChecked
                        checked={isChidori === 'false'}
                        onChange={handleChangeChidori}
                      />
                      <label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
                    </div>
                  </div>
                </div>
              </div>
              <div className="self-table-item">
                <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div>
                <div className="self-item-td">
                  <div className="pop-form-radio">
                    <div className="d-check-radio pop">
                      <input
                        type="radio"
                        name="radio03"
                        id="ra03"
                        checked={setupLocation === 'center'}
                        value={'center'}
                        onChange={handleSetupLocation}
                      />
                      <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.center')}</label>
                    </div>
                    <div className="d-check-radio pop">
                      <input
                        type="radio"
                        name="radio04"
                        id="ra04"
                        checked={setupLocation === 'eaves'}
                        value={'eaves'}
                        onChange={handleSetupLocation}
                      />
                      <label htmlFor="ra04">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.eaves')}</label>
                    </div>
                    <div className="d-check-radio pop">
                      <input
                        type="radio"
                        name="radio05"
                        id="ra05"
                        checked={setupLocation === 'ridge'}
                        value={'ridge'}
                        onChange={handleSetupLocation}
                      />
                      <label htmlFor="ra05">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.ridge')}</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="self-table-flx">
              <div className="d-check-box pop">
                <input type="checkbox" id="ch04" checked={isMaxSetup === 'true'} value={'true'} onChange={handleMaxSetup} />
                <label htmlFor="ch04">{getMessage('modal.module.basic.setting.module.placement.maximum')}</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
})

export default Placement