'use client'

import { useState } from 'react'
import FirstOption from './FirstOption'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
import { useMessage } from '@/hooks/useMessage'
import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
import { canGridOptionSeletor } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { usePopup } from '@/hooks/usePopup'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'

export default function SettingModal01(props) {
  const { id } = props
  const [buttonAct, setButtonAct] = useState(1)
  const { getMessage } = useMessage()
  const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
  const { closePopup } = usePopup()

  const {
    canvas,
    settingModalFirstOptions,
    setSettingModalFirstOptions,
    settingsData,
    setSettingsData,
    settingsDataSave,
    setSettingsDataSave,
    fetchSettings,
    globalFont,
    setGlobalFont,
    planSizeSettingMode,
    setPlanSizeSettingMode,
    settingModalSecondOptions,
    setSettingModalSecondOptions,
    adsorptionPointMode,
    setAdsorptionPointMode,
    setAdsorptionRange,
    gridColor,
    setGridColor,
    color,
  } = useCanvasSetting()
  const firstProps = {
    canvas,
    settingModalFirstOptions,
    setSettingModalFirstOptions,
    settingsData,
    setSettingsData,
    settingsDataSave,
    setSettingsDataSave,
  }
  const secondProps = {
    fetchSettings,
    globalFont,
    setGlobalFont,
    planSizeSettingMode,
    setPlanSizeSettingMode,
    settingModalSecondOptions,
    setSettingModalSecondOptions,
    adsorptionPointMode,
    setAdsorptionPointMode,
    setAdsorptionRange,
    settingsData,
    setSettingsData,
    settingsDataSave,
    setSettingsDataSave,
  }
  const gridProps = { gridColor, setGridColor, color }

  const handleBtnClick = (num) => {
    setButtonAct(num)
  }

  return (
    <>
      <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }}>
        <div className={`modal-pop-wrap sm mount`}>
          <div className="modal-head modal-handle">
            <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
            <button className="modal-close" onClick={() => closePopup(id, true)}>
              닫기
            </button>
          </div>
          <div className="modal-body">
            <div className="left-bar modal-handle"></div>
            <div className="right-bar modal-handle"></div>
            <div className="modal-btn-wrap">
              <button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => handleBtnClick(1)}>
                {getMessage('modal.canvas.setting.display')}
              </button>

              <button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => handleBtnClick(2)}>
                {getMessage('modal.canvas.setting.font.plan')}
              </button>
              {canGridOptionSeletorValue && (
                <button className={`btn-frame modal ${buttonAct === 3 ? 'act' : ''}`} onClick={() => handleBtnClick(3)}>
                  {getMessage('modal.canvas.setting.grid')}
                </button>
              )}
            </div>
            {buttonAct === 1 && <FirstOption {...firstProps} />}
            {buttonAct === 2 && <SecondOption {...secondProps} />}
            {buttonAct === 3 && <GridOption {...gridProps} />}
          </div>
          <div className="modal-foot modal-handle"></div>
        </div>
      </WithDraggable>
    </>
  )
}
