import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import FontSetting from '@/components/common/font/FontSetting'
import PlanSizeSetting from '@/components/floor-plan/modal/setting01/planSize/PlanSizeSetting'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'

export default function SecondOption() {
  const { getMessage } = useMessage()
  const { addPopup, closePopup, closePopups } = usePopup()
  const [showFontSettingModal, setShowFontSettingModal] = useState(false)
  const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
  const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
  const dimensionSettings = useRecoilValue(dimensionLineSettingsState)

  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
  const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
  const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
  const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
  const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()

  // 데이터를 최초 한 번만 조회
  useEffect(() => {
    console.log('SecondOption useEffect 실행')
    //fetchSettings()
  }, [objectNo])

  let dimensionId = null
  let fontId = null
  let planSizeId = null
  const [pixel, setPixel] = useState(dimensionSettings.pixel)
  const [color, setColor] = useState(dimensionSettings.color)
  const [font, setFont] = useState(null)
  const [fontSize, setFontSize] = useState(dimensionSettings.fontSize)
  const [fontColor, setFontColor] = useState(dimensionSettings.fontColor)

  useEffect(() => {
    dimensionId = uuidv4()
    fontId = uuidv4()
    planSizeId = uuidv4()
  }, [])

  const dimensionProps = {
    color,
    setColor,
    pixel,
    setPixel,
    font,
    setFont,
    fontSize,
    setFontSize,
    fontColor,
    setFontColor,
    id: dimensionId,
    isShow: showDimensionLineSettingModal,
    setIsShow: setShowDimensionLineSettingModal,
  }

  const [horizon, setHorizon] = useState(1600)
  const [vertical, setVertical] = useState(1600)

  const fontProps = {
    id: fontId,
    pos: { x: 745, y: 180 },
    setIsShow: setShowFontSettingModal,
  }
  const planSizeProps = {
    id: planSizeId,
    horizon,
    setHorizon,
    vertical,
    setVertical,
    setIsShow: setShowPlanSizeSettingModal,
    pos: { x: 1025, y: 180 },
  }

  const handlePopup = (type) => {
    setShowPlanSizeSettingModal(false)
    setShowFontSettingModal(false)

    switch (type) {
      case 'font1': {
        //문자 글꼴변경
        setShowFontSettingModal(true)
        fontProps.type = 'commonText'
        fontProps.id = fontId + 1
        addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
        break
      }

      case 'font2': {
        //흐름 방향 글꼴 변경
        setShowFontSettingModal(true)
        fontProps.type = 'flowText'
        fontProps.id = fontId + 2
        addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
        break
      }

      case 'font3': {
        //치수 글꼴변경
        setShowFontSettingModal(true)
        fontProps.type = 'lengthText'
        fontProps.id = fontId + 3
        addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
        break
      }

      case 'font4': {
        //회로번호 글꼴변경
        setShowFontSettingModal(true)
        fontProps.type = 'circuitNumberText'
        fontProps.id = fontId
        addPopup(fontId, 2, <FontSetting {...fontProps} />)
        break
      }

      case 'dimensionLine': {
        //치수선 설정
        if (!showDimensionLineSettingModal) {
          setShowDimensionLineSettingModal(true)
          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
        } else {
          setShowDimensionLineSettingModal(false)
          closePopup(dimensionId)
        }
        break
      }

      case 'planSize': {
        //도면크기 설정
        setShowPlanSizeSettingModal(true)
        addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
        break
      }
    }
  }

  return (
    <>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.edit')}</h3>
        <div className="flex-check-box for2">
          {settingModalSecondOptions &&
            settingModalSecondOptions.option3.map((item) => (
              <button key={item.id} className="arr-btn" onClick={() => handlePopup('font' + item.id)}>
                <span>{getMessage(item.name)}</span>
              </button>
            ))}
        </div>
      </div>
      <div className="modal-check-btn-wrap">
        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.font.plan.absorption')}</h3>
        <div className="flex-check-box for-line">
          {settingModalSecondOptions &&
            settingModalSecondOptions.option4.map((item) => (
              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={() => onClickOption(item)}>
                <span className="check-area"></span>
                <span className="title-area">{getMessage(item.name)}</span>
              </button>
            ))}
        </div>
        <div className="flex-check-box for-line">
          {/*<button className="arr-btn" onClick={() => setShowDimensionLineSettingModal(true)}>*/}
          <button className={`arr-btn ${showDimensionLineSettingModal ? 'act' : ''}`} onClick={() => handlePopup('dimensionLine')}>
            <span>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')}</span>
          </button>
          <button className={`arr-btn ${showPlanSizeSettingModal ? 'act' : ''}`} onClick={() => handlePopup('planSize')}>
            <span>{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</span>
          </button>
          <button
            className="adsorption-point act"
            onClick={(e) => {
              setAdsorptionPointMode(!adsorptionPointMode)
            }}
          >
            <span>{getMessage('modal.canvas.setting.font.plan.absorption.point')}</span>
            <i>{adsorptionPointMode ? 'ON' : 'OFF'}</i>
          </button>
        </div>
      </div>
    </>
  )
}