import { forwardRef, useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { checkedModuleState, currentCanvasPlanState, isManualModuleSetupState } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty } from '@/util/common-utils'

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

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

  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)

  const setCheckedModules = useSetRecoilState(checkedModuleState)
  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
  const { makeModuleInitArea } = useModuleBasicSetting(3)

  const [isMultiModule, setIsMultiModule] = useState(false)

  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)

  //모듈 배치면 생성
  useEffect(() => {
    if (moduleSelectionData) {
      //1개라도 치도리 불가가 있으면 치도리 불가
      const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
      if (isChidroriValue) {
        setIsChidoriNotAble(true)
      }
      makeModuleInitArea(moduleSelectionData)
    }

    return () => {
      setIsManualModuleSetup(false)
    }
  }, [])

  //최초 지입시 체크
  useEffect(() => {
    if (isObjectNotEmpty(moduleSelectionData)) {
      //두번째 선택한 데이터가를 기반으로 세번째 선택을 체크한다
      if (moduleSelectionData.roofConstructions.length > 0 && moduleSelectionData.module.itemList.length > 0) {
        let initCheckedModule = {}
        moduleSelectionData.module.itemList.forEach((obj, index) => {
          if (index === 0) {
            initCheckedModule = { [obj.itemId]: true }
          } else {
            initCheckedModule = { ...initCheckedModule, [obj.itemId]: true }
          }
        })
        setSelectedItems(initCheckedModule)
        setSelectedModules(moduleSelectionData.module)
      }

      //모듈 배치면 생성
      if (isObjectNotEmpty(moduleSelectionData.module) && moduleSelectionData.module.itemList.length > 1) {
        setIsMultiModule(true)
      }
    }
  }, [moduleSelectionData])

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

  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) => {
    const bool = e.target.value === 'true' ? true : false
    setIsChidori(bool)
    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}
                              checked={selectedItems[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={(e) => handleChangeChidori(e)}
                      />
                      <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" checked={!isChidori} value={'false'} onChange={(e) => handleChangeChidori(e)} />
                      <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}
                        disabled={isMultiModule}
                      />
                      <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}
                        disabled={isMultiModule}
                      />
                      <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