import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import Orientation from '@/components/floor-plan/modal/basic/step/Orientation'
import Module from '@/components/floor-plan/modal/basic/step/Module'
import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
import Placement from '@/components/floor-plan/modal/basic/step/Placement'
import { useRecoilState } from 'recoil'
import { canvasSettingState } from '@/store/canvasAtom'

export default function BasicSetting({ setShowBasicSettingModal }) {
  const { getMessage } = useMessage()
  const [tabNum, setTabNum] = useState(1)
  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
  return (
    <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
      <div className={`modal-pop-wrap lx-2`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
          <button className="modal-close" onClick={() => setShowBasicSettingModal(false)}>
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="roof-module-tab">
            <div className={`module-tab-bx act`}>{getMessage('modal.module.basic.setting.orientation.setting')}</div>
            <span className={`tab-arr ${tabNum !== 1 ? 'act' : ''}`}></span>
            <div className={`module-tab-bx ${tabNum !== 1 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.setting')}</div>
            <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
            <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.module.basic.setting.module.placement')}</div>
          </div>
          {tabNum === 1 && <Orientation setTabNum={setTabNum} />}
          {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} />}

          {/*배치면 초기설정 - 입력방법: 육지붕*/}
          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && <PitchPlacement setTabNum={setTabNum} />}

          <div className="grid-btn-wrap">
            {tabNum !== 1 && (
              <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
                {getMessage('modal.module.basic.setting.prev')}
              </button>
            )}
            {tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}
            {tabNum !== 3 && (
              <button className="btn-frame modal" onClick={() => setTabNum(tabNum + 1)}>
                Next
              </button>
            )}
            {tabNum === 3 && (
              <>
                <button className="btn-frame modal mr5">{getMessage('modal.module.basic.setting.passivity.placement')}</button>
                <button className="btn-frame modal act">{getMessage('modal.module.basic.setting.auto.placement')}</button>
              </>
            )}
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}