import { useEffect, useState, useRef } from 'react'
import { useRecoilValue, useRecoilState } from 'recoil'
import { pitchTextSelector } from '@/store/canvasAtom'
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'

export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab, tempModuleSelectionData, setTempModuleSelectionData }) {
  const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트

  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([]) //공법 초기화
    resetSelected()
  }

  //처마력바 체크
  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.length)

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

    if (addRoof.raft) {
      setSelectedRaftBase({
        ...selectedRaftBase,
        raftBaseCd: addRoof.raft,
        clCode: addRoof.raft,
      })
    }
  }, [])

  //리코일에 데이터가 담기는 시점에 시작
  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])

  // useEffect(() => {
  //   if (isExistData) {
  //     setConstructionListParams({
  //       ...moduleSelectionInitParams,
  //       ...roofBaseParams,
  //       roofBaseCd: selectedRoofBase.roofBaseCd,
  //       inclCd: addRoof.pitch,
  //       roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0,
  //       raftBaseCd: selectedRaftBase.raftBaseCd ? selectedRaftBase.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: selectedRaftBase.raftBaseCd ? selectedRaftBase.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: '' })
  }

  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: selectedRaftBase.clCode ? selectedRaftBase.clCode : '',
      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 || false
        selectedConstruction.setupSnowCover = moduleConstructionSelectionData.construction.setupSnowCover || false
        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])

  //거대메이커, 공법, 지붕밑바탕 api 조회
  const getModuleOptionsListData = async (params, type) => {
    const optionsList = await getTrestleList(params)
    console.log('optionsList', optionsList)

    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)) {
        resetSelected()
      }
    }
  }, [moduleSelectionInitParams])

  const handleHajebichiAndLength = (e, type) => {
    if (type === 'length') {
      setLengthBase(Number(e.target.value))
    } else {
      setHajebichi(Number(e.target.value))
    }
    resetSelected()
  }

  const resetSelected = () => {
    //가대 선택 초기화
    setSelectedTrestle({})

    //공법 선택 초기화
    setSelectedConstMthd({})

    //지붕밑바탕 선택 초기화
    setSelectedRoofBase({})

    //공법 리스트 초기화
    setConstructionList([])

    // 기본 정보 초기화
    setModuleSelectionData({
      ...moduleSelectionData,
      roofConstructions: [],
    })

    // 선택 데이터 초 기화
    setModuleConstructionSelectionData({
      addRoof: addRoof,
      trestle: {},
      construction: {},
    })

    //임시 데이터 초기화
    setTempModuleSelectionData({
      ...moduleSelectionData,
      roofConstructions: [],
    })

    //처마커버 해제
    setCvrChecked(false)
    //눈막이금구 해제
    setSnowGdChecked(false)

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

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

  return {
    raftCodes,
    trestleList,
    constMthdList,
    roofBaseList,
    constructionList,
    globalPitchText,
    selectedRaftBase,
    selectedTrestle,
    selectedConstMthd,
    selectedRoofBase,
    constructionRef,
    cvrYn,
    cvrChecked,
    snowGdPossYn,
    snowGdChecked,
    lengthBase,
    hajebichi,
    lengthRef,
    hajebichiRef,
    handleHajebichiAndLength,
    handleChangeRaftBase,
    handleChangeTrestle,
    handleChangeConstMthd,
    handleChangeRoofBase,
    handleConstruction,
    handleCvrChecked,
    handleSnowGdChecked,
  }
}