import { GlobalDataContext } from '@/app/GlobalDataProvider'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
import { useMessage } from '@/hooks/useMessage'
import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
import { roofsState } from '@/store/roofAtom'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty } from '@/util/common-utils'
import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'

const Trestle = forwardRef((props, ref) => {
  const { setTabNum, trestleTrigger, roofs, setRoofs, moduleSelectionData, setModuleSelectionData } = props
  const { getMessage } = useMessage()
  // const [selectedTrestle, setSelectedTrestle] = useState()
  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
  const pitchText = useRecoilValue(pitchTextSelector)
  const [selectedRoof, setSelectedRoof] = useState()
  const {
    trestleState,
    dispatch,
    raftBaseList,
    trestleList,
    constMthdList,
    roofBaseList,
    constructionList,
    eavesMargin,
    ridgeMargin,
    kerabaMargin,
    setEavesMargin,
    setRidgeMargin,
    setKerabaMargin,
    cvrYn,
    cvrChecked,
    snowGdPossYn,
    snowGdChecked,
    setCvrYn,
    setCvrChecked,
    setSnowGdPossYn,
    setSnowGdChecked,
  } = useModuleTrestle({
    selectedRoof,
  })
  const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
  // const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
  const [lengthBase, setLengthBase] = useState(0)
  const [hajebichi, setHajebichi] = useState(0)
  const [selectedRaftBase, setSelectedRaftBase] = useState(null)
  const [selectedTrestle, setSelectedTrestle] = useState(null)
  const [selectedConstMthd, setSelectedConstMthd] = useState(null)
  const [selectedConstruction, setSelectedConstruction] = useState(null)
  const [selectedRoofBase, setSelectedRoofBase] = useState(null)
  const { managementState } = useContext(GlobalDataContext)

  useEffect(() => {
    if (roofs && !selectedRoof) {
      setSelectedRoof(roofs[0])
    }
  }, [roofs])

  useEffect(() => {
    if (selectedRoof) {
      dispatch({ type: 'SET_INITIALIZE', roof: { ...selectedRoof, moduleTpCd: selectedModules.itemTp } })
    }
  }, [selectedRoof])

  useEffect(() => {
    if (raftBaseList.length > 0) setSelectedRaftBase(raftBaseList.find((raft) => raft.clCode === trestleState?.raftBaseCd) ?? null)
  }, [raftBaseList])

  useEffect(() => {
    if (trestleList.length > 0) setSelectedTrestle(trestleList.find((trestle) => trestle.trestleMkrCd === trestleState?.trestleMkrCd) ?? null)
  }, [trestleList])

  useEffect(() => {
    if (roofBaseList.length > 0) setSelectedRoofBase(roofBaseList.find((roofBase) => roofBase.roofBaseCd === trestleState?.roofBaseCd) ?? null)
  }, [roofBaseList])

  useEffect(() => {
    if (constMthdList.length > 0) setSelectedConstMthd(constMthdList.find((constMthd) => constMthd.constMthdCd === trestleState?.constMthdCd) ?? null)
  }, [constMthdList])

  useEffect(() => {
    if (constructionList.length > 0) {
      setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.constTp) ?? null)
    }
  }, [constructionList])

  const getConstructionState = (index) => {
    if (constructionList && constructionList.length > 0) {
      if (constructionList[index].constPossYn === 'Y') {
        if (trestleState && trestleState.constTp === constructionList[index].constTp) {
          return 'blue'
        }
        return 'white'
      }
      return 'no-click'
    }
    return 'no-click'
  }

  const onChangeRaftBase = (e) => {
    setSelectedRaftBase(e)
    dispatch({
      type: 'SET_RAFT_BASE',
      roof: {
        moduleTpCd: selectedModules.itemTp ?? '',
        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
        raftBaseCd: e.clCode,
      },
    })
  }

  const onChangeTrestleMaker = (e) => {
    setSelectedTrestle(e)
    dispatch({
      type: 'SET_TRESTLE_MAKER',
      roof: {
        moduleTpCd: selectedModules.itemTp ?? '',
        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
        raftBaseCd: trestleState.raftBaseCd ?? '',
        trestleMkrCd: e.trestleMkrCd,
      },
    })
  }

  const onChangeConstMthd = (e) => {
    setSelectedConstMthd(e)
    dispatch({
      type: 'SET_CONST_MTHD',
      roof: {
        moduleTpCd: selectedModules.itemTp ?? '',
        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
        raftBaseCd: trestleState.raftBaseCd ?? '',
        trestleMkrCd: trestleState.trestleMkrCd,
        constMthdCd: e.constMthdCd,
      },
    })
  }

  const onChangeRoofBase = (e) => {
    setSelectedRoofBase(e)
    dispatch({
      type: 'SET_ROOF_BASE',
      roof: {
        moduleTpCd: selectedModules.itemTp ?? '',
        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
        raftBaseCd: trestleState.raftBaseCd ?? '',
        trestleMkrCd: trestleState.trestleMkrCd,
        constMthdCd: trestleState.constMthdCd,
        roofBaseCd: e.roofBaseCd,
        illuminationTp: managementState?.surfaceTypeValue ?? '',
        instHt: managementState?.installHeight ?? '',
        stdWindSpeed: managementState?.standardWindSpeedId ?? '',
        stdSnowLd: managementState?.verticalSnowCover ?? '',
        inclCd: selectedRoof?.pitch ?? 0,
        roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
      },
    })
  }
  const handleChangeRoofMaterial = (index) => {
    const newAddedRoofs = roofs.map((roof, i) => {
      if (i === selectedRoof.index) {
        return {
          ...selectedRoof,
          ...trestleState,
          eavesMargin,
          ridgeMargin,
          kerabaMargin,
          cvrYn,
          snowGdPossYn,
          cvrChecked,
          snowGdChecked,
        }
      }
      return { ...roof }
    })
    setRoofs(newAddedRoofs)
    setSelectedRoof(newAddedRoofs[index])
  }

  const handleConstruction = (index) => {
    if (constructionList[index]?.constPossYn === 'Y') {
      dispatch({
        type: 'SET_CONSTRUCTION',
        roof: {
          moduleTpCd: selectedModules.itemTp ?? '',
          roofMatlCd: selectedRoof?.roofMatlCd ?? '',
          raftBaseCd: trestleState.raftBaseCd ?? '',
          trestleMkrCd: trestleState.trestleMkrCd,
          constMthdCd: trestleState.constMthdCd,
          roofBaseCd: trestleState.roofBaseCd,
          illuminationTp: managementState?.surfaceTypeValue ?? '',
          instHt: managementState?.installHeight ?? '',
          stdWindSpeed: managementState?.standardWindSpeedId ?? '',
          stdSnowLd: +managementState?.verticalSnowCover ?? '',
          inclCd: selectedRoof?.pitch.toString() ?? 0,
          roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
          constTp: constructionList[index].constTp,
          mixMatlNo: selectedModules.mixMatlNo,
          workingWidth: selectedRoof?.length.toString() ?? '',
          // snowGdPossYn: constructionList[index].snowGdPossYn,
          // cvrYn: constructionList[index].cvrYn,
        },
      })

      setCvrYn(constructionList[index].cvrYn)
      setSnowGdPossYn(constructionList[index].snowGdPossYn)
      setCvrChecked(false)
      setSnowGdChecked(false)
    }
  }

  const isComplete = () => {
    const newAddedRoofs = roofs.map((roof, i) => {
      if (i === selectedRoof?.index) {
        return {
          ...selectedRoof,
          ...trestleState,
          eavesMargin,
          ridgeMargin,
          kerabaMargin,
          cvrYn,
          snowGdPossYn,
          cvrChecked,
          snowGdChecked,
        }
      }
      return { ...roof }
    })

    let result = true
    newAddedRoofs.forEach((roof) => {
      if (roof.eavesMargin && roof.ridgeMargin && roof.kerabaMargin) {
        return true
      }

      if (!roof.trestleMkrCd) result = false
      if (!roof.constMthdCd) result = false
      if (!roof.roofBaseCd) result = false
      if (!roof.constTp) result = false

      if (selectedRoof.lenAuth === 'C') {
        if (!trestleState?.lengthBase) result = false
      }
      if (['C', 'R'].includes(selectedRoof.raftAuth)) {
        if (!roof.raftBaseCd) result = false
      }

      if (['C', 'R'].includes(selectedRoof.roofPchAuth)) {
        if (!roof.roofPchBase) result = false
      }
    })

    console.log('newAddedRoofs', newAddedRoofs)

    if (result) {
      setRoofs(newAddedRoofs)
      setModuleSelectionData({
        ...moduleSelectionData,
        roofConstructions: newAddedRoofs.map((roof, index) => {
          return {
            addRoof: {
              ...roof.addRoof,
              ...moduleSelectionData.roofConstructions[index].addRoof,
            },
            trestle: {
              ...roof.trestle,
              ...moduleSelectionData.roofConstructions[index].trestle,
            },
            construction: {
              ...roof.construction,
              ...moduleSelectionData.roofConstructions[index].construction,
            },
          }
        }),
      })
      trestleTrigger({
        roofConstruction: newAddedRoofs.map((roof) => {
          return {
            roofIndex: roof.index,
            addRoof: {
              ...roof,
            },
            trestle: {
              ...selectedTrestle,
              raftBaseCd: roof.raftBaseCd,
            },
            construction: {
              ...constructionList.find((construction) => trestleState.constTp === construction.constTp),
              roofIndex: roof.index,
              setupCover: roof.cvrYn === 'Y',
              setupSnowCover: roof.snowGdYn === 'Y',
              selectedIndex: roof.index,
            },
          }
        }),
      })
    }

    return result
  }

  useImperativeHandle(ref, () => ({
    isComplete,
  }))

  return (
    <div className="roof-module-tab2-overflow">
      <div className="module-table-box mb10">
        <div className="module-box-tab">
          {roofs &&
            roofs.map((roof, index) => (
              <button
                key={index}
                className={`module-btn ${selectedRoof?.index === index ? 'act' : ''}`}
                onClick={() => (roof ? handleChangeRoofMaterial(index) : null)}
              >
                {roof !== undefined ? `${roof.nameJp} (${currentAngleType === 'slope' ? roof.pitch : roof.angle}${pitchText})` : '-'}
              </button>
            ))}
        </div>
        <div className="module-table-inner">
          <div className="module-table-flex-wrap tab2">
            <div className="module-flex-item">
              <div className="eaves-keraba-table">
                {selectedRoof && selectedRoof.lenAuth === 'C' && (
                  <>
                    <div className="eaves-keraba-item">
                      <div className="eaves-keraba-th">L</div>
                      <div className="eaves-keraba-td">
                        <div className="grid-select">
                          <input
                            type="text"
                            className="input-origin block"
                            value={trestleState?.lengthBase}
                            onChange={(e) => setLengthBase(e.target.value)}
                            disabled={selectedRoof.lenAuth === 'R'}
                          />
                        </div>
                      </div>
                    </div>
                  </>
                )}
                {selectedRoof && ['C', 'R'].includes(selectedRoof.raftAuth) && (
                  <>
                    <div className="eaves-keraba-item">
                      <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
                      <div className="eaves-keraba-td">
                        <div className="grid-select">
                          {raftBaseList.length > 0 && (
                            <QSelectBox
                              options={raftBaseList}
                              value={selectedRaftBase}
                              sourceKey={'clCode'}
                              targetKey={'clCode'}
                              showKey={'clCodeNm'}
                              disabled={selectedRoof.raftAuth === 'R'}
                              onChange={(e) => onChangeRaftBase(e)}
                            />
                          )}
                        </div>
                      </div>
                    </div>
                  </>
                )}
                {selectedRoof && ['C', 'R'].includes(selectedRoof.roofPchAuth) && (
                  <>
                    <div className="eaves-keraba-item">
                      <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.hajebichi')}</div>
                      <div className="eaves-keraba-td">
                        <div className="grid-select">
                          <input
                            type="text"
                            className="input-origin block"
                            disabled={selectedRoof.roofPchAuth === 'R'}
                            onChange={(e) => handleHajebichiAndLength(e, 'hajebichi')}
                            value={hajebichi}
                          />
                        </div>
                      </div>
                    </div>
                  </>
                )}
                <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">
                      {trestleList && (
                        <QSelectBox
                          title={getMessage('selectbox.title')}
                          options={trestleList}
                          value={selectedTrestle}
                          sourceKey={'trestleMkrCd'}
                          targetKey={'trestleMkrCd'}
                          showKey={'trestleMkrCdJp'}
                          onChange={(e) => onChangeTrestleMaker(e)}
                        />
                      )}
                    </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">
                      {constMthdList && (
                        <QSelectBox
                          title={getMessage('selectbox.title')}
                          options={constMthdList}
                          value={selectedConstMthd}
                          sourceKey={'constMthdCd'}
                          targetKey={'constMthdCd'}
                          showKey={'constMthdCdJp'}
                          onChange={(e) => onChangeConstMthd(e)}
                        />
                      )}
                    </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">
                      {roofBaseList && (
                        <QSelectBox
                          title={getMessage('selectbox.title')}
                          options={roofBaseList}
                          sourceKey={'roofBaseCd'}
                          targetKey={'roofBaseCd'}
                          showKey={'roofBaseCdJp'}
                          value={selectedRoofBase}
                          onChange={(e) => onChangeRoofBase(e)}
                        />
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="module-flex-item non-flex">
              <div className="flex-item-btn-wrap">
                <button className={`btn-frame roof ${getConstructionState(0)}`} onClick={() => handleConstruction(0)}>
                  {getMessage('modal.module.basic.setting.module.standard.construction')}(I)
                </button>
                <button className={`btn-frame roof ${getConstructionState(3)}`} onClick={() => handleConstruction(3)}>
                  {getMessage('modal.module.basic.setting.module.multiple.construction')}
                </button>
                <button className={`btn-frame roof ${getConstructionState(1)}`} onClick={() => handleConstruction(1)}>
                  {getMessage('modal.module.basic.setting.module.standard.construction')}
                </button>
                <button className={`btn-frame roof ${getConstructionState(4)}`} onClick={() => handleConstruction(4)}>
                  {getMessage('modal.module.basic.setting.module.multiple.construction')}(II)
                </button>
                <button className={`btn-frame roof ${getConstructionState(2)}`} onClick={() => handleConstruction(2)}>
                  {getMessage('modal.module.basic.setting.module.enforce.construction')}
                </button>
              </div>
              <div className="grid-check-form-flex">
                <div className="d-check-box pop">
                  <input
                    type="checkbox"
                    id={`ch01`}
                    disabled={!cvrYn || cvrYn === 'N'}
                    checked={cvrChecked || false}
                    // onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, cvrChecked: !trestleState.cvrChecked } })}
                    onChange={() => setCvrChecked(!cvrChecked)}
                  />
                  <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`}
                    disabled={!trestleState?.snowGdPossYn || trestleState?.snowGdPossYn === 'N'}
                    checked={snowGdChecked || false}
                    // onChange={() => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, snowGdChecked: !trestleState.snowGdChecked } })}
                    onChange={() => setSnowGdChecked(!snowGdChecked)}
                  />
                  <label htmlFor={`ch02`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
                </div>
              </div>
            </div>
          </div>

          <div className="module-area mt10">
            <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.area')}</div>
            <div className="outline-form mr15">
              <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
              <div className="input-grid mr10">
                <input
                  type="text"
                  className="input-origin block"
                  value={eavesMargin ?? 0}
                  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
                  onChange={(e) => setEavesMargin(e.target.value)}
                />
              </div>
              <span className="thin">mm</span>
            </div>
            <div className="outline-form mr15">
              <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
              <div className="input-grid mr10">
                <input
                  type="text"
                  className="input-origin block"
                  value={ridgeMargin ?? 0}
                  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
                  onChange={(e) => setRidgeMargin(e.target.value)}
                />
              </div>
              <span className="thin">mm</span>
            </div>
            <div className="outline-form ">
              <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
              <div className="input-grid mr10">
                <input
                  type="text"
                  className="input-origin block"
                  value={kerabaMargin ?? 0}
                  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
                  onChange={(e) => setKerabaMargin(e.target.value)}
                />
              </div>
              <span className="thin">mm</span>
            </div>
          </div>
        </div>
      </div>
      <div className="module-bottom">
        <div className="module-table-box ">
          <div className="warning-guide">
            <div className="warning">
              {getMessage('modal.module.basic.setting.module.setting.info1')}
              <br />
              {getMessage('modal.module.basic.setting.module.setting.info2')}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
})

export default Trestle