import { useState } 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 WithDraggable from '@/components/common/draggable/withDraggable'

export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModal }) {
  const { getMessage } = useMessage()
  const [tabNum, setTabNum] = useState(1)
  const [circuitAllocationType, setCircuitAllocationType] = useState(1)
  const circuitProps = {
    circuitAllocationType,
    setCircuitAllocationType,
  }
  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
      <div className={`modal-pop-wrap lx-2`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
          <button className="modal-close" onClick={() => setShowCircuitTrestleSettingModal(false)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="roof-module-tab">
            <div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
              {getMessage('modal.circuit.trestle.setting.power.conditional.select')}
            </div>
            <span className={`tab-arr ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}></span>
            <div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
              {getMessage('modal.circuit.trestle.setting.circuit.allocation')}
            </div>
            <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
            <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
          </div>
          {tabNum === 1 && <PowerConditionalSelect />}
          {tabNum === 2 && <CircuitAllocation {...circuitProps} />}
          {tabNum === 3 && <StepUp />}
          <div className="grid-btn-wrap">
            {tabNum !== 1 && (
              <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
                {getMessage('modal.common.prev')}
              </button>
            )}
            {tabNum !== 3 && (
              <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
                Next
              </button>
            )}
            {tabNum === 3 && <button className="btn-frame modal act">保存 (仮割り当て)</button>}
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}