'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 { adsorptionPointAddModeState, canGridOptionSeletor, tempGridModeState } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue } from 'recoil'
import { usePopup } from '@/hooks/usePopup'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { settingModalGridOptionsState } from '@/store/settingAtom'

export default function SettingModal01(props) {
  const { id } = props
  const [buttonAct, setButtonAct] = useState(1)
  const { getMessage } = useMessage()
  const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor)
  const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
  const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
  const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
  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)
  }

  const onClose = () => {
    setTempGridMode(false)
    setAdsorptionPointAddMode(false)
    setGridOptions((prev) => {
      const newSettingOptions = [...prev]
      newSettingOptions[0].selected = false
      newSettingOptions[2].selected = false
      return [...newSettingOptions]
    })

    closePopup(id, true)
  }

  return (
    <WithDraggable isShow={true} pos={{ x: 1275, y: 180 }} className="sm">
      <WithDraggable.Header title={getMessage('modal.canvas.setting')} onClose={onClose} />
      <WithDraggable.Body>
        <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} />}
      </WithDraggable.Body>
    </WithDraggable>
  )
}