import { useEffect, useState, useRef, useReducer } from 'react'
import { useRecoilValue, useRecoilState } from 'recoil'
import { currentCanvasPlanState, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import { useMasterController } from '@/hooks/common/useMasterController'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { moduleSelectionDataState, moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty, isEqualObjects } from '@/util/common-utils'
import QSelectBox from '@/components/common/select/QSelectBox'
import { addedRoofsState } from '@/store/settingAtom'

export default function ModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab, tempModuleSelectionData, setTempModuleSelectionData }) {
  const { getMessage } = useMessage()
  const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`

  const addRoofsArray = useRecoilValue(addedRoofsState)

  const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)

  const { findCommonCode } = useCommonCode()
  const [raftCodes, setRaftCodes] = useState([]) //가대 목록

  const [trestleList, setTrestleList] = useState([])
  const [constMthdList, setConstMthdList] = useState([])
  const [roofBaseList, setRoofBaseList] = useState([])
  const [constructionList, setConstructionList] = useState([{}]) //공법 목록

  const [selectedRaftBase, setSelectedRaftBase] = useState({}) //선택된 가대
  const [selectedTrestle, setSelectedTrestle] = useState({}) //선택된 가대
  const [selectedConstMthd, setSelectedConstMthd] = useState({}) //선택된 공법
  const [selectedRoofBase, setSelectedRoofBase] = useState({}) //선택된 지붕밑바탕
  const [selectedConstruction, setSelectedConstruction] = useState({}) //선택된 공법
  const [constructionListParams, setConstructionListParams] = useState({})

  const [trestleParams, setTrestleParams] = useState({}) //서까래, 가대메이커,공법,지붕밑바탕 관련  api호출 파라메터
  const [constructionParams, setConstructionParams] = useState({}) //공법 관련  api호출 파라메터
  const [roofBaseParams, setRoofBaseParams] = useState({}) //지붕밑바탕 관련  api호출 파라메터

  const moduleSelectionInitParams = useRecoilValue(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
  const moduleSelectionInitOriginData = useRef(moduleSelectionInitParams)

  const { getTrestleList, getConstructionList } = useMasterController()

  const constructionRef = useRef([])
  const [cvrYn, setCvrYn] = useState('N')
  const [snowGdPossYn, setSnowGdPossYn] = useState('N')

  const [cvrChecked, setCvrChecked] = useState(false)
  const [snowGdChecked, setSnowGdChecked] = useState(false)

  const [isExistData, setIsExistData] = useState(false)

  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
  const [moduleConstructionSelectionData, setModuleConstructionSelectionData] = useState()

  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터

  const [hajebichi, setHajebichi] = useState(0)
  const [lengthBase, setLengthBase] = useState(0)

  const hajebichiRef = useRef()
  const lengthRef = useRef()

  //서까래간격 변경
  const handleChangeRaftBase = (option) => {
    setSelectedRaftBase(option)
    setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode }) //가대메이커
    setConstMthdList([]) //공법 초기화
    setRoofBaseList([]) //지붕밑바탕 초기화
    setConstructionList([]) //공법 초기화
  }

  //지붕밑바탕변경

  //처마력바 체크
  const handleCvrChecked = () => {
    setCvrChecked(!cvrChecked)
    setSelectedConstruction({ ...selectedConstruction, setupCover: !cvrChecked })
  }

  //눈막이금구 체크
  const handleSnowGdChecked = () => {
    setSnowGdChecked(!snowGdChecked)
    setSelectedConstruction({ ...selectedConstruction, setupSnowCover: !snowGdChecked })
  }

  const getConstructionListData = async (params) => {
    if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
      const optionsList = await getConstructionList(params)
      setConstructionList(optionsList.data)
    }
  }

  useEffect(() => {
    setHajebichi(addRoof.hajebichi)
    setLengthBase(addRoof.lenBase)

    // 202600 경사도
    const raftCodeList = findCommonCode('203800')
    //서까래 코드
    raftCodeList.forEach((obj) => {
      obj.name = obj.clCodeNm
      obj.id = obj.clCode
    })
    setRaftCodes(raftCodeList)
  }, [])

  //리코일에 데이터가 담기는 시점에 시작
  useEffect(() => {
    if (
      isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex]) &&
      isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].trestle) &&
      isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].construction)
    ) {
      setModuleConstructionSelectionData(moduleSelectionData.roofConstructions[tabIndex])
    }
  }, [moduleSelectionData])

  useEffect(() => {
    if (isObjectNotEmpty(moduleConstructionSelectionData)) {
      setIsExistData(true)
    }
  }, [moduleConstructionSelectionData])

  //높이를 변경하면 addRoofs에 적용
  useEffect(() => {
    // //가대 조회 api 파라메터
    // setTrestleParams({ ...trestleParams, workingWidth: lengthBase })

    const copyAddRoof = { ...addRoof }
    copyAddRoof.length = Number(lengthBase)
    copyAddRoof.lenBase = lengthBase
    const index = addRoof.index
    const newArray = [...addRoofsArray.slice(0, index), copyAddRoof, ...addRoofsArray.slice(index + 1)]
    setAddedRoofs(newArray)
  }, [lengthBase])

  //망둥어 피치를 변경하면 addRoof 변경
  useEffect(() => {
    const copyAddRoof = { ...addRoof }
    copyAddRoof.hajebichi = Number(hajebichi)
    copyAddRoof.roofPchBase = hajebichi
    const index = addRoof.index
    const newArray = [...addRoofsArray.slice(0, index), copyAddRoof, ...addRoofsArray.slice(index + 1)]
    setAddedRoofs(newArray)
  }, [hajebichi])

  useEffect(() => {
    if (isExistData) {
      setConstructionListParams({
        ...moduleSelectionInitParams,
        ...roofBaseParams,
        roofBaseCd: selectedRoofBase.roofBaseCd,
        inclCd: addRoof.pitch,
        roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0,
        raftBaseCd: addRoof.raftBaseCd,
      })
    }
  }, [selectedRoofBase])

  useEffect(() => {
    if (
      isExistData &&
      constructionList.length > 0 &&
      isObjectNotEmpty(moduleConstructionSelectionData?.construction) &&
      moduleConstructionSelectionData?.construction.hasOwnProperty('constPossYn') ///키가 있으면
    ) {
      const selectedIndex = moduleConstructionSelectionData.construction.selectedIndex
      const construction = constructionList[selectedIndex]
      if (construction.constPossYn === 'Y') {
        handleConstruction(selectedIndex)
      }
    }
  }, [constructionList])

  //모듈 변경
  useEffect(() => {
    //lengbase는 무조건 있다고 가정 하고 최초에 실행 방지
    if (selectedModules) {
      //가대메이커 파라메터 만들기
      setTrestleParams({
        moduleTpCd: selectedModules.itemTp,
        roofMatlCd: addRoof.roofMatlCd,
        raftBaseCd: addRoof.raftBaseCd,
        workingWidth: lengthBase,
      })
    }
  }, [selectedModules])

  //가대메이커 api 호출
  useEffect(() => {
    if (isObjectNotEmpty(trestleParams)) {
      getModuleOptionsListData(trestleParams, 'trestle')
    }
  }, [trestleParams])

  //가대메이커 변경 함수
  const handleChangeTrestle = (option) => {
    setSelectedTrestle(option) //선택값  저장
    setConstructionParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' })
    // setConstMthdList([]) //공법 초기화
    // setRoofBaseList([]) //지붕밑바탕 초기화
    // setConstructionList([]) //공법 초기화
  }

  useEffect(() => {
    if (isObjectNotEmpty(constructionParams)) {
      getModuleOptionsListData(constructionParams, 'construction')
    }
  }, [constructionParams])

  //공법 변경
  const handleChangeConstMthd = (option) => {
    setSelectedConstMthd(option) //선택된값 저장
    setRoofBaseParams({
      ...trestleParams,
      trestleMkrCd: selectedTrestle.trestleMkrCd,
      constMthdCd: option.constMthdCd,
      roofBaseCd: '',
    })
  }

  useEffect(() => {
    if (isObjectNotEmpty(roofBaseParams)) {
      getModuleOptionsListData(roofBaseParams, 'roofBase')
    }
  }, [roofBaseParams])

  const handleChangeRoofBase = (option) => {
    setConstructionListParams({
      ...moduleSelectionInitParams,
      trestleMkrCd: selectedTrestle.trestleMkrCd,
      constMthdCd: selectedConstMthd.constMthdCd,
      roofBaseCd: option.roofBaseCd,
      inclCd: addRoof.pitch,
      roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0,
      raftBaseCd: addRoof.raftBaseCd,
      roofMatlCd: addRoof.roofMatlCd,
    })
    setSelectedRoofBase(option)
  }

  //공법 리스트 변경 함수
  useEffect(() => {
    if (isObjectNotEmpty(constructionListParams)) {
      getConstructionListData(constructionListParams)
    }
  }, [constructionListParams])

  //공법 선택 함수
  const handleConstruction = (index) => {
    if (index > -1) {
      const isPossibleIndex = constructionRef.current
        .map((el, i) => (el.classList.contains('white') || el.classList.contains('blue') ? i : -1))
        .filter((index) => index !== -1)

      isPossibleIndex.forEach((index) => {
        if (constructionRef.current[index].classList.contains('blue')) {
          constructionRef.current[index].classList.remove('blue')
          constructionRef.current[index].classList.add('white')
        }
      })
      constructionRef.current[index].classList.remove('white')
      constructionRef.current[index].classList.add('blue')

      const selectedConstruction = constructionList[index]
      selectedConstruction.roofIndex = roofTab
      selectedConstruction.setupCover = false //처마력바 설치 여부
      selectedConstruction.setupSnowCover = false //눈막이금구 설치 여부
      selectedConstruction.selectedIndex = index

      setCvrYn(selectedConstruction.cvrYn)
      setSnowGdPossYn(selectedConstruction.snowGdPossYn)

      //기존에 선택된 데이터가 있으면 체크한다
      if (moduleConstructionSelectionData && moduleConstructionSelectionData.construction) {
        selectedConstruction.setupCover = moduleConstructionSelectionData.construction.setupCover
        selectedConstruction.setupSnowCover = moduleConstructionSelectionData.construction.setupSnowCover
        setCvrChecked(selectedConstruction.setupCover)
        setSnowGdChecked(selectedConstruction.setupSnowCover)
      }

      setSelectedConstruction(selectedConstruction)
    } else {
      constructionRef.current.forEach((ref) => {
        ref.classList.remove('blue')
      })
    }
  }

  //공법 선택시 이후 프로세스
  useEffect(() => {
    if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
      if (tabIndex === roofTab) {
        const common = { ...moduleSelectionInitParams }
        const module = { ...selectedModules }
        const newRoofConstructions = {
          roofIndex: tabIndex,
          addRoof: addRoof,
          trestle: selectedRoofBase,
          construction: selectedConstruction,
        }

        const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === tabIndex)

        if (index > -1) {
          const newArray = [
            ...tempModuleSelectionData.roofConstructions.slice(0, index),
            newRoofConstructions,
            ...tempModuleSelectionData.roofConstructions.slice(index + 1),
          ]
          setTempModuleSelectionData({ common: common, module: module, roofConstructions: newArray })
        } else {
          setTempModuleSelectionData({
            common: common,
            module: module,
            roofConstructions: [...tempModuleSelectionData.roofConstructions, { ...newRoofConstructions }],
          })
        }
      }
    }
  }, [selectedConstruction])

  const getModuleOptionsListData = async (params, type) => {
    const optionsList = await getTrestleList(params)

    if (optionsList.data.length > 0) {
      if (type === 'trestle') {
        setTrestleList(optionsList.data)
        if (isExistData) {
          handleChangeTrestle(moduleConstructionSelectionData?.trestle)
        } else {
          setConstMthdList([])
          setRoofBaseList([])
        }
      } else if (type === 'construction') {
        setConstMthdList(optionsList.data)
        if (isExistData) {
          handleChangeConstMthd(moduleConstructionSelectionData?.trestle)
        } else {
          setRoofBaseList([])
        }
      } else if (type === 'roofBase') {
        setRoofBaseList(optionsList.data)
        if (isExistData) {
          handleChangeRoofBase(moduleConstructionSelectionData?.trestle)
        }
      }
    }
  }

  useEffect(() => {
    //모듈이 선택되어있을때
    if (moduleSelectionInitOriginData.current.moduleItemId && moduleSelectionInitOriginData.current.moduleTpCd) {
      //초기에 들어온 데이터가 수정된 데이터가 값이 다르다면`
      if (!isEqualObjects(moduleSelectionInitOriginData.current, moduleSelectionInitParams)) {
        // console.log('moduleSelectionInitParams', moduleSelectionInitParams)
        //가대 선택 초기화
        setSelectedTrestle({})
        //공법 선택 초기화
        setSelectedConstMthd({})
        //지붕밑바탕 선택 초기화
        setSelectedRoofBase({})
        //공법 리스트 초기화
        setConstructionList([])
        // 기본 정보 초기화
        setModuleSelectionData({
          ...moduleSelectionData,
          roofConstructions: [],
        })
        // 선택 데이터 초 기화
        setModuleConstructionSelectionData({
          addRoof: addRoof,
          trestle: {},
          construction: {},
        })

        setTempModuleSelectionData({
          ...moduleSelectionData,
          roofConstructions: [],
        })

        // 데이터 없음으로 변경
        setIsExistData(false)

        //변경된 데이터를 ref에 저장
        moduleSelectionInitOriginData.current = moduleSelectionInitParams
      }
    }
  }, [moduleSelectionInitParams])

  // useEffect(() => {
  // useEffect(() => {
  //   console.log('moduleSelectionInitParams', moduleSelectionInitParams)

  //   //물건 상세의 데이터를 가지고 초기화 데이터를 만든다
  //   if (
  //     moduleSelectionInitParams.illuminationTp &&
  //     moduleSelectionInitParams.instHt &&
  //     moduleSelectionInitParams.stdSnowLd &&
  //     moduleSelectionInitParams.stdWindSpeed
  //   ) {
  //     const isModuleLoaded = moduleSelectionInitParams.hasOwnProperty('moduleTpCd') //모듈컬럼이 있으면 모듈을 변경했다는 내용

  //     //모듈 이름이 있고 모듈이 선택되어있다면
  //     if (isModuleLoaded && moduleSelectionInitParams.moduleTpCd) {
  //       setTrestleParams({
  //         moduleTpCd: moduleSelectionInitParams.moduleTpCd,
  //         roofMatlCd: addRoof.roofMatlCd,
  //         raftBaseCd: addRoof.raftBaseCd,
  //         workingWidth: lengthBase,
  //       })
  //       // setConstructionList([])

  //       if (isObjectNotEmpty(moduleConstructionSelectionData)) {
  //         //기존에 데이터가 있으면 파라메터를 넣는다
  //         setConstructionParams({ ...moduleConstructionSelectionData.trestle, constMthdCd: '', roofBaseCd: '' })
  //         setRoofBaseParams({ ...moduleConstructionSelectionData.trestle, roofBaseCd: '' })

  //         setIsExistData(true)
  //       }
  //     }
  //   }

  //   setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModules })
  // }, [])

  // useEffect(() => {
  //   console.log('roofBaseParams', roofBaseParams)

  //   if (isObjectNotEmpty(roofBaseParams)) {
  //     getModuleOptionsListData(roofBaseParams)
  //   }
  // }, [roofBaseParams])

  // useEffect(() => {
  //   if (isObjectNotEmpty(tempModuleSelectionData)) {
  //     setModuleSelectionData(tempModuleSelectionData)
  //   }
  // }, [tempModuleSelectionData])

  return (
    <>
      <div className="module-table-inner">
        <div className="module-table-flex-wrap tab2">
          <div className="module-flex-item">
            <div className="module-flex-item-tit">
              {getMessage('modal.module.basic.setting.module.roof.material')}：{roofMaterial.nameJp}（
              {addRoof.roofAngleSet === 'slope' ? roofMaterial.pitch : roofMaterial.angle}
              {globalPitchText}）
            </div>
            <div className="eaves-keraba-table">
              <div className="eaves-keraba-item">
                {roofMaterial && ['C'].includes(roofMaterial.lenAuth) && (
                  <>
                    <div className="eaves-keraba-th">L</div>
                    <div className="eaves-keraba-td">
                      <div className="grid-select">
                        <input
                          type="text"
                          className="input-origin block"
                          value={lengthBase}
                          onChange={(e) => setLengthBase(e.target.value)}
                          disabled={roofMaterial.lenAuth === 'R' ? true : false}
                          ref={lengthRef}
                        />
                      </div>
                    </div>
                  </>
                )}
              </div>
              <div className="eaves-keraba-item">
                {roofMaterial && ['C', 'R'].includes(roofMaterial.raftAuth) && (
                  <>
                    <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
                    <div className="eaves-keraba-td">
                      <div className="grid-select">
                        {raftCodes.length > 0 && (
                          <QSelectBox
                            options={raftCodes}
                            value={addRoof}
                            sourceKey={'clCode'}
                            targetKey={'raftBaseCd'}
                            showKey={'clCodeNm'}
                            disabled={roofMaterial.raftAuth === 'R' ? true : false}
                            onChange={handleChangeRaftBase}
                          />
                        )}
                      </div>
                    </div>
                  </>
                )}
              </div>
              <div className="eaves-keraba-item">
                {roofMaterial && ['C', 'R'].includes(roofMaterial.roofPchAuth) && (
                  <>
                    <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={roofMaterial.roofPchAuth === 'R' ? true : false}
                          onChange={(e) => setHajebichi(e.target.value)}
                          value={hajebichi}
                          ref={hajebichiRef}
                        />
                      </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={'trestleMkrCdNm'}
                        onChange={handleChangeTrestle}
                      />
                    )}
                  </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={'constMthdCdNm'}
                        onChange={handleChangeConstMthd}
                      />
                    )}
                  </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}
                        value={selectedRoofBase}
                        sourceKey={'roofBaseCd'}
                        targetKey={'roofBaseCd'}
                        showKey={'roofBaseCdNm'}
                        onChange={handleChangeRoofBase}
                      />
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="module-flex-item non-flex">
            <div className="flex-item-btn-wrap">
              <button
                className={`btn-frame roof ${isObjectNotEmpty(constructionList[0]) && constructionList[0].constPossYn === 'Y' ? 'white' : ''}`}
                ref={(el) => (constructionRef.current[0] = el)}
                onClick={() => (isObjectNotEmpty(constructionList[0]) && constructionList[0].constPossYn === 'Y' ? handleConstruction(0) : null)}
              >
                標準施工(Ⅰ)
              </button>
              <button
                className={`btn-frame roof ${isObjectNotEmpty(constructionList[3]) && constructionList[3].constPossYn === 'Y' ? 'white' : ''}`}
                ref={(el) => (constructionRef.current[3] = el)}
                onClick={() => (isObjectNotEmpty(constructionList[3]) && constructionList[3].constPossYn === 'Y' ? handleConstruction(3) : null)}
              >
                多設施工
              </button>
              <button
                className={`btn-frame roof ${isObjectNotEmpty(constructionList[1]) && constructionList[1].constPossYn === 'Y' ? 'white' : ''}`}
                ref={(el) => (constructionRef.current[1] = el)}
                onClick={() => (isObjectNotEmpty(constructionList[1]) && constructionList[1].constPossYn === 'Y' ? handleConstruction(1) : null)}
              >
                標準施工
              </button>
              <button
                className={`btn-frame roof ${isObjectNotEmpty(constructionList[4]) && constructionList[4].constPossYn === 'Y' ? 'white' : ''}`}
                ref={(el) => (constructionRef.current[4] = el)}
                onClick={() => (isObjectNotEmpty(constructionList[4]) && constructionList[4].constPossYn === 'Y' ? handleConstruction(4) : null)}
              >
                多設施工（II）
              </button>
              <button
                className={`btn-frame roof ${isObjectNotEmpty(constructionList[2]) && constructionList[2].constPossYn === 'Y' ? 'white' : ''}`}
                ref={(el) => (constructionRef.current[2] = el)}
                onClick={() => (isObjectNotEmpty(constructionList[2]) && constructionList[2].constPossYn === 'Y' ? handleConstruction(2) : null)}
              >
                強化施工
              </button>
            </div>
            <div className="grid-check-form">
              <div className="d-check-box pop">
                <input
                  type="checkbox"
                  id={`ch01_${tabIndex}`}
                  disabled={cvrYn === 'N' ? true : false}
                  checked={cvrChecked}
                  onChange={handleCvrChecked}
                />
                <label htmlFor={`ch01_${tabIndex}`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
              </div>
              <div className="d-check-box pop">
                <input
                  type="checkbox"
                  id={`ch02_${tabIndex}`}
                  disabled={snowGdPossYn === 'N' ? true : false}
                  checked={snowGdChecked}
                  onChange={handleSnowGdChecked}
                />
                <label htmlFor={`ch02_${tabIndex}`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}