qcast-front/src/components/floor-plan/modal/basic/step/Placement.jsx

import { forwardRef, useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { checkedModuleState } from '@/store/canvasAtom'
import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
import { selectedModuleState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
import { useModulePlace } from '@/hooks/module/useModulePlace'

const Placement = forwardRef((props, refs) => {
  const { getMessage } = useMessage()
  const [isChidori, setIsChidori] = useState(false)
  const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)

  const [setupLocation, setSetupLocation] = useState('center')
  const [isMaxSetup, setIsMaxSetup] = useState('false')
  const [selectedItems, setSelectedItems] = useState({})

  const { makeModuleInstArea } = useModuleBasicSetting()
  const { selectedModules } = useModulePlace()

  const setCheckedModules = useSetRecoilState(checkedModuleState)
  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)

  //모듈 배치면 생성
  useEffect(() => {
    makeModuleInstArea()

    //1개라도 치도리 불가가 있으면 치도리 불가
    const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
    if (isChidroriValue) {
      setIsChidoriNotAble(true)
    }
  }, [])

  //체크된 모듈 데이터
  useEffect(() => {
    const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
    const moduleArray = selectedModules.itemList.filter((item) => {
      return checkedModuleIds.includes(item.itemId)
    })
    setCheckedModules(moduleArray)
  }, [selectedItems])

  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: [],
  }

  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) => {
    if (e.target.checked) {
      setIsMaxSetup('true')
      refs.isMaxSetup.current = 'true'
    } else {
      setIsMaxSetup('false')
      refs.isMaxSetup.current = 'false'
    }
  }

  //체크된 모듈 아이디 추출
  const handleSelectedItem = (e) => {
    setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
  }

  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>
                  {selectedModules.itemList &&
                    selectedModules.itemList.map((item, index) => (
                      <>
                        <tr key={index}>
                          <td className="al-c">
                            <div className="d-check-box no-text pop">
                              <input type="checkbox" id={item.itemId} name={item.itemId} onChange={handleSelectedItem} />
                              <label htmlFor={item.itemId}></label>
                            </div>
                          </td>
                          <td>
                            <div className="color-wrap">
                              <span className="color-box" style={{ backgroundColor: item.color }}></span>
                              <span className="name">{item.itemNm}</span>
                            </div>
                          </td>
                          <td className="al-r">{item.wpOut}</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}
                        disabled={isChidoriNotAble}
                        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} 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