import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState, useEffect, useContext } from 'react'
import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'
import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
import { useAxios } from '@/hooks/useAxios'
import { useMasterController } from '@/hooks/common/useMasterController'
import { get } from 'react-hook-form'
import { correntObjectNoState } from '@/store/settingAtom'
import { useRecoilValue } from 'recoil'
import { GlobalDataContext } from '@/app/GlobalDataProvider'

import { useRecoilState } from 'recoil'
import { powerConditionalState } from '@/store/circuitTrestleAtom'
import { POLYGON_TYPE } from '@/common/common'
import { useSwal } from '@/hooks/useSwal'
import { canvasState } from '@/store/canvasAtom'

import { useTrestle } from '@/hooks/module/useTrestle'

const ALLOCATION_TYPE = {
  AUTO: 'auto',
  PASSIVITY: 'passivity',
}
export default function CircuitTrestleSetting({ id }) {
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  // 탭 번호 1: 파워 컨디셔너 선택(+수동 설정)
  // 탭 번호 2: 회로 할당
  const [tabNum, setTabNum] = useState(1)
  const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)

  const [makers, setMakers] = useState([])
  const [series, setSeries] = useState([])
  const [models, setModels] = useState([])
  const [selectedMaker, setSelectedMaker] = useState(null)
  const [selectedModels, setSelectedModels] = useState(null)
  const [selectedSeries, setSelectedSeries] = useState(null)
  const correntObjectNo = useRecoilValue(correntObjectNoState)
  const { getPcsMakerList } = useMasterController()
  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
  const { apply } = useTrestle()

  useEffect(() => {
    // console.log(canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE))
    // if (canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE).length === 0) {
    //   swalFire({
    //     title: '모듈을 배치해주세요.',
    //     type: 'alert',
    //     confirmFn: () => {
    //       closePopup(id)
    //     },
    //   })
    // }
  }, [])

  // useEffect(() => {
  //   console.log('🚀 ~ CircuitTrestleSetting ~ series:', series)
  //   const selectedSeries = series.filter((s) => s.selectd).map((s) => s.pcsSerCd)
  //   if (selectedSeries.length > 0) {
  //     getPcsMakerList(selectedSeries).then((res) => {
  //       setModels(res.data)
  //     })
  //   }
  // }, [series])
  // 회로 할당 유형
  const [circuitAllocationType, setCircuitAllocationType] = useState(1)

  const powerConditionalSelectProps = {
    tabNum,
    setTabNum,
  }
  const circuitProps = {
    tabNum,
    setTabNum,
    circuitAllocationType,
    setCircuitAllocationType,
  }

  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
      <div className={`modal-pop-wrap l-2`}>
        <div className="modal-head modal-handle">
          <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
          <button className="modal-close" onClick={() => closePopup(id)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="roof-module-tab">
            <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
            <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
            <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
              {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
            </div>
          </div>
          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...powerConditionalSelectProps} />}
          {tabNum === 2 && <StepUp />}
          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
            <div className="grid-btn-wrap">
              <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
                {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
              </button>
              <button className="btn-frame modal act" onClick={() => setAllocationType(ALLOCATION_TYPE.PASSIVITY)}>
                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
              </button>
            </div>
          )}
          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
            <div className="grid-btn-wrap">
              <button className="btn-frame modal mr5" onClick={() => setAllocationType(ALLOCATION_TYPE.AUTO)}>
                {getMessage('modal.common.prev')}
              </button>
              <button className="btn-frame modal act" onClick={() => setTabNum(2)}>
                {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
              </button>
            </div>
          )}
          {tabNum === 2 && (
            <div className="grid-btn-wrap">
              <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
                {getMessage('modal.common.prev')}
              </button>
              <button className="btn-frame modal act" onClick={() => apply()}>
                {getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
              </button>
            </div>
          )}
        </div>
        <div className="modal-foot modal-handle"></div>
      </div>
    </WithDraggable>
  )
}