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 { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
import { useRecoilState, useRecoilValue } from 'recoil'
import { fontSelector, globalFontAtom } from '@/store/fontAtom'

export default function SecondOption() {
  const { getMessage } = useMessage()
  const { addPopup, closePopup } = usePopup()
  const [showFontSettingModal, setShowFontSettingModal] = useState(false)
  const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
  const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
  const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
  const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
  const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
  const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
  const commonFont = useRecoilValue(fontSelector('commonText'))
  const flowFont = useRecoilValue(fontSelector('flowText'))
  const lengthFont = useRecoilValue(fontSelector('lengthText'))
  const circuitNumberTextFont = useRecoilValue(fontSelector('circuitNumberText'))

  const [dimensionId, setDimensionId] = useState(uuidv4())
  const [fontId, setFontId] = useState(uuidv4())
  const [planSizeId, setPlanSizeId] = useState(uuidv4())
  // 데이터를 최초 한 번만 조회
  useEffect(() => {
    //fetchSettings()
  }, [objectNo])

  const dimensionProps = {
    id: dimensionId,
    isShow: showDimensionLineSettingModal,
    setIsShow: setShowDimensionLineSettingModal,
  }

  const [horizon, setHorizon] = useState(1600)
  const [vertical, setVertical] = useState(1600)
  const handlePopup = (type) => {
    setShowPlanSizeSettingModal(false)
    setShowFontSettingModal(false)

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

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

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

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

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

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

  const handleFontSave = (font) => {
    setGlobalFont((prev) => {
      return {
        ...prev,
        [fontProps.type]: {
          fontFamily: font.fontFamily,
          fontWeight: font.fontWeight,
          fontSize: font.fontSize,
          fontColor: font.fontColor,
        },
      }
    })
  }

  const fontProps = {
    id: fontId,
    pos: { x: 745, y: 180 },
    setIsShow: setShowFontSettingModal,
    onSave: handleFontSave,
    isConfig: true,
  }

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

  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>
    </>
  )
}