import { forwardRef, use, useContext, useEffect, useImperativeHandle, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { getDegreeInOrientation } from '@/util/canvas-util'
import { numberCheck } from '@/util/common-utils'
import { addedRoofsState, basicSettingState } from '@/store/settingAtom'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import QSelectBox from '@/components/common/select/QSelectBox'
import { roofsState } from '@/store/roofAtom'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import Swal from 'sweetalert2'
import { normalizeDecimal} from '@/util/input-utils'

export const Orientation = forwardRef((props, ref) => {
  const { getMessage } = useMessage()
  const { findCommonCode } = useCommonCode()
  const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
  const basicSetting = useRecoilValue(basicSettingState)
  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) //지붕재 선택
  const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
  const [roofTab, setRoofTab] = useState(0) //지붕재 탭
  const [selectedModuleSeries, setSelectedModuleSeries] = useState(null)
  const [moduleSeriesList, setModuleSeriesList] = useState([])
  const [filteredModuleList, setFilteredModuleList] = useState([])
  const {
    roofs,
    setRoofs,
    tabNum,
    setTabNum,
    compasDeg,
    setCompasDeg,
    selectedModules,
    roughnessCodes,
    windSpeedCodes,
    managementState,
    setManagementState,
    moduleList,
    moduleSelectionData,
    setModuleSelectionData,
    setSelectedModules,
    selectedSurfaceType,
    setSelectedSurfaceType,
    installHeight,
    setInstallHeight,
    standardWindSpeed,
    setStandardWindSpeed,
    verticalSnowCover,
    setVerticalSnowCover,
    orientationTrigger,
    nextStep,
    currentCanvasPlan,
    loginUserState,
    updateObjectDataApi,
  } = props
  const [inputCompasDeg, setInputCompasDeg] = useState(compasDeg ?? 0)
  const [inputInstallHeight, setInputInstallHeight] = useState('0')
  const [inputMargin, setInputMargin] = useState('0')
  const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState('0')
  const [inputRoughness, setInputRoughness] = useState(selectedSurfaceType)
  const [inputStandardWindSpeed, setInputStandardWindSpeed] = useState(standardWindSpeed)
  const { restoreModuleInstArea } = useModuleBasicSetting()
  const moduleData = {
    header: [
      { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
      {
        name: `${getMessage('height')}  (mm)`,
        prop: 'height',
      },
      { name: `${getMessage('width')} (mm)`, prop: 'width' },
      { name: `${getMessage('output')} (W)`, prop: 'output' },
    ],
  }

  const allOption = {
    moduleSerCd: 'ALL',
    moduleSerNm: getMessage("board.sub.total") || 'ALL'
  };

  useEffect(() => {
    if (basicSetting.roofSizeSet === '3') {
      restoreModuleInstArea()
    }
  }, [])

  useEffect(() => {
    if (moduleSelectionData?.common) {
      setInputMargin(moduleSelectionData?.common?.margin)
    }
  }, [moduleSelectionData])

  useEffect(() => {
    if (selectedModules) {
      const foundModule = moduleList.find((module) => module.itemId === selectedModules.itemId)
      if (foundModule) {
        setSelectedModules(foundModule)

        // 선택된 모듈의 시리즈로 업데이트 (시리즈 목록이 있는 경우에만)
        if (moduleSeriesList.length > 0 && foundModule.moduleSerCd) {
          const currentSeries = moduleSeriesList.find(series => series.moduleSerCd === foundModule.moduleSerCd)
          if (currentSeries && (!selectedModuleSeries || selectedModuleSeries.moduleSerCd !== currentSeries.moduleSerCd)) {
            //setSelectedModuleSeries(currentSeries)
          }
        }else{
          setSelectedModuleSeries(allOption)
        }
      }
    }
  }, [selectedModules, moduleList, moduleSeriesList])

  useEffect(() => {
    if (selectedSurfaceType) {
      setInputRoughness(roughnessCodes.find((code) => code.clCode === managementState?.surfaceTypeValue))
    }
  }, [selectedSurfaceType])

  useEffect(() => {
    if (standardWindSpeed) setInputStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === managementState?.standardWindSpeedId))
  }, [standardWindSpeed])

  useEffect(() => {
    if (managementState?.installHeight && managementState?.installHeight) {
      setSelectedSurfaceType(roughnessCodes.find((code) => code.clCode === managementState?.surfaceTypeValue))
      setInputInstallHeight(managementState?.installHeight)
      setStandardWindSpeed(windSpeedCodes.find((code) => code.clCode === managementState?.standardWindSpeedId))
      setInputVerticalSnowCover(managementState?.verticalSnowCover)
    }
  }, [managementState])

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

  const handleNextStep = () => {
    if (isComplete()) {
      const common = {
        illuminationTp: inputRoughness.clCode,
        illuminationTpNm: inputRoughness.clCodeNm,
        instHt: inputInstallHeight,
        stdWindSpeed: inputStandardWindSpeed?.clCode,
        stdSnowLd: inputVerticalSnowCover,
        saleStoreNorthFlg: managementState?.saleStoreNorthFlg,
        moduleTpCd: selectedModules.itemTp,
        moduleItemId: selectedModules.itemId,
        margin: inputMargin,
      }
      setCompasDeg(inputCompasDeg)
      setInstallHeight(inputInstallHeight)
      setVerticalSnowCover(inputVerticalSnowCover)
      setSelectedSurfaceType(inputRoughness)
      setStandardWindSpeed(inputStandardWindSpeed)
      nextStep(inputCompasDeg)
      setManagementState({
        ...managementState,
        installHeight: inputInstallHeight,
        verticalSnowCover: inputVerticalSnowCover,
        standardWindSpeedId: inputStandardWindSpeed?.clCode,
        surfaceType: inputRoughness.clCodeNm,
        surfaceTypeValue: inputRoughness.clCode,
      })
      setModuleSelectionData({
        ...moduleSelectionData,
        module: {
          ...selectedModules,
        },
        common,
      })
      orientationTrigger({
        compasDeg: inputCompasDeg,
        common: common,
        module: {
          ...selectedModules,
        },
        margin: inputMargin,
      })
      updateObjectDataApi({
        objectNo: currentCanvasPlan.objectNo, //오브젝트_no
        standardWindSpeedId: inputStandardWindSpeed?.clCode, //기준풍속코드
        verticalSnowCover: inputVerticalSnowCover, //적설량
        surfaceType: inputRoughness.clCodeNm, //면조도구분
        installHeight: inputInstallHeight, //설치높이
        userId: loginUserState.userId, //작성자아아디
      })
      setTabNum(2)
    } else {
      if (!selectedModules || !selectedModules.itemId) {
        Swal.fire({
          title: getMessage('module.not.found'),
          icon: 'warning',
        })

      }
    }
  }

  const checkDegree = (e) => {
    if (e === '-0' || e === '-') {
      setInputCompasDeg('-')
      return
    }
    if (e === '0-') {
      setInputCompasDeg('-0')
      return
    }
    const n = Number(normalizeDecimal(e))
    if (n >= -180 && n <= 180) {
      if (numberCheck(n)) {
        setInputCompasDeg(n)
      }
    } else {
      setInputCompasDeg(compasDeg)
    }
  }

  const isComplete = () => {
    if (!selectedModules || !selectedModules.itemId) return false
    if (basicSetting && basicSetting.roofSizeSet !== '3') {
      if (inputInstallHeight <= 0) {
        return false
      }

      if (+inputVerticalSnowCover <= 0) {
        return false
      }

      if (!inputStandardWindSpeed) return false
      if (!inputRoughness) return false
    }

    return true
  }

  const handleChangeModuleSeries = (e) => {
    resetRoofs()
    setSelectedModuleSeries(e)

    // 선택된 시리즈에 맞는 모듈 목록 필터링 및 첫 번째 모듈 선택
    if (e && moduleList.length > 0) {
      let filtered

      if (e.moduleSerCd === 'ALL') {
        // "전체" 선택 시 모든 모듈 표시
        filtered = moduleList
      } else {
        // 특정 시리즈 선택 시 해당 시리즈 모듈만 표시
        //filtered = moduleList.filter(module => module.moduleSerCd === e.moduleSerCd)
       filtered = moduleList.filter(module => module && module.moduleSerCd && module.moduleSerCd === e.moduleSerCd)
      }

      setFilteredModuleList(filtered)

      // 필터링된 목록의 첫 번째 모듈을 자동 선택
      if (filtered.length > 0) {
        const firstModule = filtered[0]
        setSelectedModules(firstModule)
        // 상위 컴포넌트의 handleChangeModule 호출
        if (handleChangeModule) {
          handleChangeModule(firstModule)
        }
      }
    } else {
      // 모듈 리스트가 비어있는 경우
      setFilteredModuleList([])
      setSelectedModules(null)
    }
  }

  const handleChangeModule = (e) => {
    resetRoofs()
    setSelectedModules(e)
  }

  const handleChangeRoughness = (e) => {
    resetRoofs()
    setInputRoughness(e)
  }

  const handleChangeInstallHeight = (e) => {
    resetRoofs()
    setInputInstallHeight(e)
  }

  const handleChangeStandardWindSpeed = (e) => {
    resetRoofs()
    setInputStandardWindSpeed(e)
  }

  const handleChangeVerticalSnowCover = (e) => {
    resetRoofs()
    setInputVerticalSnowCover(e)
  }

  const resetRoofs = () => {
    const newRoofs = addedRoofs.map((roof) => {
      return {
        ...roof,
        trestle: {
          lengthBase: null,
          trestleMkrCd: null,
          constMthdCd: null,
          constTp: null,
          roofBaseCd: null,
          roofPchBase: null,
        },
        addRoof: {
          ...roof.addRoof,
          lengthBase: null,
          eavesMargin: null,
          kerabaMargin: null,
          ridgeMargin: null,
        },
        construction: {
          constTp: null,
          cvrYn: 'N',
          snowGdPossYn: 'N',
          cvrChecked: false,
          snowGdChecked: false,
        },
      }
    })
    // setRoofs(newRoofs)
    // setAddedRoofs(newRoofs)
    setRoofsStore(newRoofs)
  }

  // 모듈시리즈 목록 생성 및 commonCode와 매핑
  useEffect(() => {
    if (moduleList.length > 0 && moduleSeriesList.length === 0) {
      const moduleSeriesCodes = findCommonCode(207100) || []

      // moduleList에서 고유한 moduleSerCd 추출
      const uniqueSeriesCd = [...new Set(moduleList.map(module => module.moduleSerCd).filter(Boolean))]

      if (uniqueSeriesCd.length > 0) {
        // moduleSerCd와 commonCode를 매핑하여 기본 moduleSeriesList 생성
        const mappedSeries = uniqueSeriesCd.map(serCd => {
          const matchedCode = moduleSeriesCodes.find(code => code.clCode === serCd)
          return {
            moduleSerCd: serCd,
            moduleSerNm: matchedCode ? matchedCode.clCodeNm : serCd
          }
        })

        // "전체" 옵션을 맨 앞에 추가
        const seriesList = [allOption, ...mappedSeries]
        setModuleSeriesList(seriesList)

        // 현재 선택된 모듈이 있으면 해당 모듈의 시리즈를 찾아서 선택
        if (selectedModules && selectedModules.moduleSerCd) {
          const currentSeries = seriesList.find(series => series.moduleSerCd === selectedModules.moduleSerCd)
          if (currentSeries) {
            setSelectedModuleSeries(currentSeries)
          } else {
            setSelectedModuleSeries(allOption)
            // "ALL"이 선택되면 자동으로 모듈 필터링 및 선택 실행
            setTimeout(() => handleChangeModuleSeries(allOption), 0)
          }
        } else {
          // 선택된 모듈이 없으면 "전체"를 기본 선택
          setSelectedModuleSeries(allOption)
          // "ALL"이 선택되면 자동으로 모듈 필터링 및 선택 실행
          setTimeout(() => handleChangeModuleSeries(allOption), 0)
        }
      }
    }
  }, [moduleList, selectedModules])

  // 초기 로딩 시에만 필터링된 모듈 목록 설정
  useEffect(() => {
    if (moduleList.length > 0 && filteredModuleList.length === 0 && selectedModuleSeries) {
      let filtered

      if (selectedModuleSeries.moduleSerCd === 'ALL') {
        // "전체" 선택 시 모든 모듈 표시
        filtered = moduleList
      } else {
        // 특정 시리즈 선택 시 해당 시리즈 모듈만 표시
        filtered = moduleList.filter(module => module.moduleSerCd === selectedModuleSeries.moduleSerCd)
      }

      setFilteredModuleList(filtered)

      if (filtered.length > 0 && !selectedModules) {
        setSelectedModules(filtered[0])
      }
    } else if (moduleList.length === 0 && filteredModuleList.length === 0 && selectedModuleSeries) {
      // 모듈 리스트가 비어있는 경우 빈 배열로 설정
      setFilteredModuleList([])
    }
  }, [moduleList, selectedModuleSeries]);
  return (
    <>
      <div className="properties-setting-wrap">
        <div className="outline-wrap">
          <div className="roof-module-inner">
            <div className="compas-wrapper">
              <div className="guide">{getMessage('modal.module.basic.setting.orientation.setting.info')}</div>
              <div className="roof-module-compas">
                <div className="compas-box">
                  <div className="compas-box-inner">
                    {Array.from({ length: 180 / 15 }).map((dot, index) => (
                      <div
                        key={index}
                        className={`circle ${getDegreeInOrientation(inputCompasDeg) === -15 * index + 180 || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
                        onClick={() => {
                          if (index === 0) {
                            setInputCompasDeg(180)
                            return
                          }
                          setInputCompasDeg(-15 * index + 180)
                        }}
                      >
                        {index === 0 && <i>180°</i>}
                        {index === 6 && <i>90°</i>}
                      </div>
                    ))}
                    {Array.from({ length: 180 / 15 }).map((dot, index) => (
                      <div
                        key={index}
                        className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === -1 * 15 * index ? 'act' : ''}`}
                        onClick={() => setInputCompasDeg(15 * index * -1)}
                      >
                        {index === 0 && <i>0°</i>}
                        {index === 6 && <i>-90°</i>}
                      </div>
                    ))}
                    <div className="compas">
                      <div className="compas-arr" style={{ transform: `rotate(${-1 * getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="center-wrap">
                <div className="outline-form">
                  <div className="d-check-box pop mr10">
                    <input type="checkbox" id="ch99" checked={hasAnglePassivity} onChange={() => setHasAnglePassivity(!hasAnglePassivity)} />
                    <label htmlFor="ch99">{getMessage('modal.module.basic.setting.orientation.setting.angle.passivity')}</label>
                  </div>
                  <div className="input-grid mr10" style={{ width: '60px' }}>
                    <input
                      type="text"
                      className="input-origin block"
                      value={inputCompasDeg}
                      readOnly={!hasAnglePassivity}
                      placeholder={0}
                      onChange={(e) => checkDegree(e.target.value)}
                    />
                  </div>
                  <span className="thin">°</span>
                  <span className="thin">（ -180 〜 180 ）</span>
                </div>
              </div>
            </div>
            <div className="compas-table-wrap">
              <div className="compas-table-box mb10">
                <div className="outline-form mb10">
                  <span>{getMessage('modal.module.basic.setting.module.series.setting')}</span>
                  <div className="grid-select">
                    <div className="grid-select">
                      <QSelectBox
                        options={moduleSeriesList.length > 0 ? moduleSeriesList : [allOption]}
                        value={selectedModuleSeries}
                        targetKey={'moduleSerCd'}
                        sourceKey={'moduleSerCd'}
                        showKey={'moduleSerNm'}
                        onChange={(e) => handleChangeModuleSeries(e)}
                      />
                    </div>
                  </div>
                </div>
                <div className="outline-form mb10">
                  <span>{getMessage('modal.module.basic.setting.module.setting2')}</span>
                  <div className="grid-select">
                    {filteredModuleList && (
                      <QSelectBox
                        options={filteredModuleList}
                        value={selectedModules}
                        targetKey={'itemId'}
                        sourceKey={'itemId'}
                        showKey={'itemNm'}
                        onChange={(e) => handleChangeModule(e)}
                        showFirstOptionWhenEmpty = {true}
                      />
                    )}
                  </div>
                </div>
                <div className="roof-module-table">
                  <table>
                    <thead>
                      <tr>
                        {moduleData.header.map((header) => {
                          return (
                            <th key={header.prop} style={{ width: header.width ? header.width + 'px' : '' }}>
                              {header.name}
                            </th>
                          )
                        })}
                      </tr>
                    </thead>
                    <tbody>
                      {Array.from({ length: 3 }).map((_, index) => {
                        return selectedModules && selectedModules?.itemList && selectedModules?.itemList?.length >= index + 1 ? (
                          <tr key={index}>
                            <td>
                              <div className="color-wrap">
                                <span
                                  className="color-box"
                                  style={{
                                    backgroundColor: selectedModules.itemList[index].color,
                                  }}
                                ></span>
                                <span className="name">{selectedModules.itemList[index].itemNm}</span>
                              </div>
                            </td>
                            <td className="al-r">{Number(selectedModules.itemList[index].shortAxis).toFixed(0)}</td>
                            <td className="al-r">{Number(selectedModules.itemList[index].longAxis).toFixed(0)}</td>
                            <td className="al-r">{Number(selectedModules.itemList[index].wpOut).toFixed(0)}</td>
                          </tr>
                        ) : (
                          <tr key={index}>
                            <td>
                              <div className="color-wrap"></div>
                            </td>
                            <td className="al-r"></td>
                            <td className="al-r"></td>
                            <td className="al-r"></td>
                          </tr>
                        )
                      })}
                    </tbody>
                  </table>
                </div>
                {basicSetting && basicSetting.roofSizeSet === '3' && (
                  <div className="outline-form mt15">
                    <span>{getMessage('modal.module.basic.setting.module.placement.area')}</span>
                    <div className="input-grid mr10" style={{ width: '60px' }}>
                      <input type="text" className="input-origin block" value={inputMargin} onChange={(e) => setInputMargin(normalizeDecimal(e.target.value))} />
                    </div>
                    <span className="thin">m</span>
                  </div>
                )}
              </div>

              {basicSetting && basicSetting.roofSizeSet !== '3' && (
                <div className="compas-table-box">
                  <div className="compas-grid-table">
                    <div className="outline-form">
                      <span>{getMessage('modal.module.basic.setting.module.surface.type')}</span>
                      <div className="grid-select">
                        {roughnessCodes.length > 0 && managementState && (
                          <QSelectBox
                            options={roughnessCodes}
                            value={inputRoughness}
                            targetKey={'clCode'}
                            sourceKey={'clCode'}
                            showKey={'clCodeNm'}
                            onChange={(e) => handleChangeRoughness(e)}
                          />
                        )}
                      </div>
                    </div>
                    <div className="outline-form">
                      <span>{getMessage('modal.module.basic.setting.module.fitting.height')}</span>
                      <div className="input-grid mr10">
                        <input
                          type="text"
                          className="input-origin block"
                          value={inputInstallHeight}
                          onChange={(e) => handleChangeInstallHeight(normalizeDecimal(e.target.value))}
                        />
                      </div>
                      <span className="thin">m</span>
                    </div>
                    <div className="outline-form">
                      <span>{getMessage('modal.module.basic.setting.module.standard.wind.speed')}</span>
                      <div className="grid-select">
                        {windSpeedCodes.length > 0 && managementState && (
                          <QSelectBox
                            title={''}
                            options={windSpeedCodes}
                            value={inputStandardWindSpeed}
                            targetKey={'clCode'}
                            sourceKey={'clCode'}
                            showKey={'clCodeNm'}
                            onChange={(e) => handleChangeStandardWindSpeed(e)}
                          />
                        )}
                      </div>
                    </div>
                    <div className="outline-form">
                      <span>{getMessage('modal.module.basic.setting.module.standard.snowfall.amount')}</span>
                      <div className="input-grid mr10">
                        <input
                          type="text"
                          className="input-origin block"
                          value={inputVerticalSnowCover}
                          onChange={(e) => handleChangeVerticalSnowCover(normalizeDecimal(e.target.value))}
                        />
                      </div>
                      <span className="thin">cm</span>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  )
})