import { useEffect, useState, useRef } from 'react'
import { useRecoilValue, useRecoilState, useResetRecoilState } 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({})

  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({ raftBaseCd: option.clCode, clCode: option.clCode })
    resetSelected(1)
    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 &&
      params.illuminationTp &&
      params.stdWindSpeed &&
      params.instHt &&
      params.stdSnowLd
    ) {
      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) {
    if (moduleSelectionData.roofConstructions.length > 0 && moduleSelectionData.roofConstructions[tabIndex].trestle.raftBaseCd) {
      //서까래 선택 데이터가 있으면 선택된걸로
      setSelectedRaftBase({
        ...selectedRaftBase,
        raftBaseCd: moduleSelectionData.roofConstructions[tabIndex].trestle.raftBaseCd,
        clCode: moduleSelectionData.roofConstructions[tabIndex].trestle.raftBaseCd,
      })
    } else {
      //없으면 기본값으로 넣는다
      if (addRoof.raft) {
        setSelectedRaftBase({
          raftBaseCd: addRoof.raft,
          clCode: addRoof.raft,
        })
      }
    }
    // }
  }, [])

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

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

  useEffect(() => {
    //되돌아왔을때 재호출 하여 선택한다
    if (isExistData) {
      setTrestleParams({
        moduleTpCd: selectedModules.itemTp,
        roofMatlCd: addRoof.roofMatlCd,
        raftBaseCd: selectedRaftBase.clCode ? selectedRaftBase.clCode : '',
        workingWidth: lengthBase,
      })
    }
  }, [isExistData])

  useEffect(() => {
    if (isExistData) {
      setConstructionListParams({
        ...moduleSelectionData.common,
        ...roofBaseParams,
        roofBaseCd: selectedRoofBase.roofBaseCd,
        inclCd: addRoof.pitch,
        roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0,
        raftBaseCd: selectedRaftBase.clCode ? selectedRaftBase.clCode : '',
      })
    }
  }, [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.clCode ? selectedRaftBase.clCode : '',
        workingWidth: lengthBase,
      })
    }
  }, [selectedModules])

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

  //가대메이커 변경 함수
  const handleChangeTrestle = (option) => {
    if (isObjectNotEmpty(option)) {
      option.raftBaseCd = selectedRaftBase.clCode
      setSelectedTrestle(option) //선택값  저장
      setConstructionParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' })
    }
  }

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

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

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

  const handleChangeRoofBase = (option) => {
    if (isObjectNotEmpty(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,
      })
      option.raftBaseCd = selectedRaftBase.raftBaseCd
      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)) {
      const common = { ...moduleSelectionInitParams }
      const module = { ...selectedModules }
      const newRoofConstructions = {
        roofIndex: tabIndex,
        addRoof: addRoof,
        trestle: selectedRoofBase,
        construction: selectedConstruction,
      }

      const index = moduleSelectionData.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)
    if (optionsList.data.length > 0) {
      if (type === 'trestle') {
        //가대 메이커일때
        setTrestleList(optionsList.data) //가대 목록
        if (isExistData && isObjectNotEmpty(moduleConstructionSelectionData?.trestle)) {
          //데이터가 있으면 선택된 가대 메이커를 선택한다
          handleChangeTrestle(moduleConstructionSelectionData?.trestle)
        } else {
          setConstMthdList([]) //공법 목록 초기화
          setRoofBaseList([]) //지붕밑바탕 목록 초기화
        }
      } else if (type === 'construction') {
        //공법일때
        setConstMthdList(optionsList.data) //공법 목록
        if (isExistData && isObjectNotEmpty(moduleConstructionSelectionData?.construction)) {
          //데이터가 있으면 선택된 공법을 선택한다
          handleChangeConstMthd(moduleConstructionSelectionData?.trestle)
        } else {
          setRoofBaseList([]) //지붕밑바탕 목록 초기화
        }
      } else if (type === 'roofBase') {
        //지붕밑바탕일때
        setRoofBaseList(optionsList.data) //지붕밑바탕 목록
        if (isExistData && isObjectNotEmpty(moduleConstructionSelectionData?.trestle)) {
          //데이터가 있으면 선택된 지붕밑바탕을 선택한다
          handleChangeRoofBase(moduleConstructionSelectionData?.trestle) //선택된 지붕밑바탕을 선택한다
        }
      }
    }
  }

  useEffect(() => {
    //모듈이 선택되어있을때
    //초기 데이터가 모두 들어있을 경우에 초기 데이터를 저장한다
    if (
      moduleSelectionInitParams.illuminationTp &&
      moduleSelectionInitParams.illuminationTpNm &&
      moduleSelectionInitParams.instHt &&
      moduleSelectionInitParams.moduleItemId &&
      moduleSelectionInitParams.moduleTpCd &&
      moduleSelectionInitParams.saleStoreNorthFlg &&
      moduleSelectionInitParams.stdSnowLd &&
      moduleSelectionInitParams.stdWindSpeed
    ) {
      if (!isObjectNotEmpty(moduleSelectionInitOriginData.current)) {
        moduleSelectionInitOriginData.current = moduleSelectionInitParams
      }
    }

    if (
      isObjectNotEmpty(moduleSelectionInitOriginData.current) &&
      !isEqualObjects(moduleSelectionInitOriginData.current, moduleSelectionInitParams)
    ) {
      resetSelected(2)
    }
  }, [moduleSelectionInitParams])

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

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

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

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

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

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

    const tempRoofConstructions = tempModuleSelectionData.roofConstructions.filter((item) => item.roofIndex !== tabIndex)

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

    //처마커버 해제
    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,
  }
}