import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
import { useEffect, useState } from 'react'
import FontSetting from '@/components/common/font/FontSetting'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useMessage } from '@/hooks/useMessage'
import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
import { useRecoilState } from 'recoil'

/*
 color: 치수선 색
 fontColor: 글꼴 색
 fontSize: 치수선 치수 색
 pixel: 치수선 두깨
*/
export default function DimensionLineSetting(props) {
  const {
    color,
    setColor,
    font,
    setFont,
    fontColor,
    setFontColor,
    fontSize,
    setFontSize,
    pixel,
    setPixel,
    isShow,
    setIsShow,
    id,
    pos = { x: 985, y: 180 },
  } = props
  const { addPopup, closePopup, closePopups } = usePopup()
  const pixels = Array.from({ length: 5 }).map((_, index) => {
    return { name: index + 1, value: index + 1 }
  })
  const [originColor, setOriginColor] = useState(color)
  const [originFont, setOriginFont] = useState(font)
  const [originFontColor, setOriginFontColor] = useState(fontColor)
  const [originFontSize, setOriginFontSize] = useState(fontSize)
  const [originPixel, setOriginPixel] = useState(pixel)
  const [fontModalId, setFontModalId] = useState(uuidv4())
  const [colorModalId, setColorModalId] = useState(uuidv4())

  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
  const [showFontModal, setShowFontModal] = useState(false)
  const { getMessage } = useMessage()
  const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)

  useEffect(() => {
    console.log(2, isShow)
    if (pixel) {
      setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
    }
    setIsShow(true)
  }, [])

  useEffect(() => {
    console.log(1, isShow)
    if (!isShow) {
      closePopups([fontModalId, colorModalId])
    }
  }, [isShow])

  const colorPickerProps = {
    isShow: showColorPickerModal,
    setIsShow: setShowColorPickerModal,
    color: originColor,
    setColor: setOriginColor,
    id: colorModalId,
    pos: {
      x: 495,
      y: 180,
    },
  }

  const fontProps = {
    isShow: showFontModal,
    setIsShow: setShowFontModal,
    color: originColor,
    setColor: setOriginColor,
    font: originFont,
    setFont: setOriginFont,
    fontColor: 'black',
    setFontColor: setOriginFontColor,
    fontSize: originFontSize,
    setFontSize: setOriginFontSize,
    id: fontModalId,
    pos: {
      x: 455,
      y: 180,
    },
  }
  const popupHandle = (type) => {
    switch (type) {
      case 'color':
        addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />)
        break
      case 'font':
        addPopup(fontModalId, 3, <FontSetting {...fontProps} />)
        break
    }
  }

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap xxxm`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
          <button
            className="modal-close"
            onClick={() => {
              closePopups([fontModalId, colorModalId, id])
              setIsShow(false)
            }}
          >
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="font-btn-wrap">
            <button className="btn-frame modal" onClick={() => popupHandle('font')}>
              {getMessage('modal.font.setting')}
            </button>
          </div>
          <div className="line-color-wrap">
            <div className="outline-form mb10">
              <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.font.size')}</span>
              <div className="grid-select mr5">
                <QSelectBox options={pixels} value={originPixel} onChange={(e) => setOriginPixel(e)} />
              </div>
              <span className="thin">pixel</span>
            </div>
            <div className="outline-form">
              <span style={{ width: 'auto' }}>{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line.color')}</span>
              <button className="color-btn" style={{ backgroundColor: originColor }} onClick={() => popupHandle('color')}></button>
            </div>
          </div>
          <div className="font-ex-wrap">
            <div className="font-ex-tit">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.display')}</div>
            <div className="form-box">
              <div className="line-form">
                <div className="line-font-box">
                  <span
                    className="font"
                    style={{
                      fontFamily: originFont?.value ?? '',
                      color: originFontColor?.value ?? 'black',
                      fontSize: originFontSize?.value ?? '12px',
                      fontWeight: '400',
                    }}
                  >
                    9,999
                  </span>
                  <span
                    className="line"
                    style={{
                      backgroundColor: originColor,
                      borderColor: originColor,
                      height: originPixel.value,
                    }}
                  ></span>
                </div>
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button
              className="btn-frame modal act"
              onClick={() => {
                setPixel(originPixel.value)
                setColor(originColor)
                setFont(originFont)
                setDimensionLineSettings((prev) => {
                  return {
                    ...prev,
                    pixel: originPixel.value,
                    color: originColor,
                    font: originFont,
                    fontColor: originFontColor,
                    fontSize: originFontSize,
                  }
                })
                setIsShow(false)
                closePopups([fontModalId, colorModalId, id])
              }}
            >
              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}