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

const fonts = [
  { id: 1, name: 'MS PGothic', value: 'MS PGothic' },
  { id: 2, name: '@Yu Gothic', value: '@Yu Gothic' },
  { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' },
  { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
  { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
  //3,
]

const fontSizes = [
  ...Array.from({ length: 4 }).map((_, index) => {
    return { id: index + 8, name: index + 8, value: index + 8 }
  }),
  ...Array.from({ length: 9 }).map((_, index) => {
    return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 }
  }),
  { id: 36, name: 36, value: 36 },
  { id: 48, name: 48, value: 48 },
  { id: 72, name: 72, value: 72 },
]

export default function DimensionLineSetting(props) {
  const { isShow, setIsShow, id, pos = { x: 985, y: 180 }, settingsData, setSettingsData, settingsDataSave, setSettingsDataSave } = props
  const { addPopup, closePopup, closePopups } = usePopup()
  const pixels = Array.from({ length: 5 }).map((_, index) => {
    return { id: index, name: index + 1, value: index + 1 }
  })
  //const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
  //const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
  //const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
  //const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)

  const [fontModalId, setFontModalId] = useState(uuidv4())
  const [colorModalId, setColorModalId] = useState(uuidv4())
  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
  const [showFontModal, setShowFontModal] = useState(false)
  const { getMessage } = useMessage()

  const { globalFont, setGlobalFont, dimensionLineSettings, setDimensionLineSettings } = useCanvasSetting()

  const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily)
  const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight)
  const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize)
  const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor)

  const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
  const [originColor, setOriginColor] = useState(dimensionLineSettings.color)

  const fontOptions = [
    { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' },
    { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' },
    { id: 'bold', name: getMessage('font.style.bold'), value: 'bold' },
    { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
  ]
  const fontColors = [
    { id: 'black', name: getMessage('color.black'), value: 'black' },
    { id: 'red', name: getMessage('color.red'), value: 'red' },
    { id: 'blue', name: getMessage('color.blue'), value: 'blue' },
    { id: 'gray', name: getMessage('color.gray'), value: 'gray' },
    { id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' },
    { id: 'green', name: getMessage('color.green'), value: 'green' },
    { id: 'pink', name: getMessage('color.pink'), value: 'pink' },
    { id: 'gold', name: getMessage('color.gold'), value: 'gold' },
    { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
  ]

  useEffect(() => {
    if (originPixel) {
      setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0])
    }

    setIsShow(true)
  }, [])

  useEffect(() => {
    if (originPixel.name) {
      setOriginPixel(originPixel)
    }
  }, [originPixel])

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

  const handleFontSave = (font) => {
    setOriginFont(font.fontFamily)
    setOriginFontWeight(font.fontWeight)
    setOriginFontSize(font.fontSize)
    setOriginFontColor(font.fontColor)
  }
  const handleColorSave = () => {}

  const colorPickerProps = {
    isShow: showColorPickerModal,
    setIsShow: setShowColorPickerModal,
    color: originColor,
    setColor: setOriginColor,
    id: colorModalId,
    name: 'DimensionLineColor',
    isConfig: true,
    pos: {
      x: 495,
      y: 180,
    },
    settingsData,
    setSettingsData,
    settingsDataSave,
    setSettingsDataSave,
  }

  const fontProps = {
    isShow: showFontModal,
    setIsShow: setShowFontModal,
    font: {
      fontFamily: originFont,
      fontWeight: originFontWeight,
      fontSize: originFontSize,
      fontColor: originFontColor,
    },
    onSave: handleFontSave,
    isConfig: true,
    id: fontModalId,
    pos: {
      x: 455,
      y: 180,
    },
    type: 'dimensionLineText',
  }
  const popupHandle = (type) => {
    switch (type) {
      case 'color':
        addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />, true)
        break
      case 'font':
        addPopup(fontModalId, 3, <FontSetting {...fontProps} />, true)
        break
    }
  }

  const onSave = () => {
    setGlobalFont((prev) => {
      return {
        ...prev,
        dimensionLineText: {
          fontFamily: originFont,
          fontWeight: originFontWeight,
          fontSize: originFontSize,
          fontColor: originFontColor,
        },
      }
    })

    setDimensionLineSettings((prev) => {
      return {
        ...prev,
        pixel: originPixel.name,
        color: originColor,
      }
    })

    setSettingsData({
      ...settingsData,
      dimensionLineText: {
        fontFamily: originFont,
        fontWeight: originFontWeight,
        fontSize: originFontSize,
        fontColor: originFontColor,
      },
      pixel: originPixel.name,
      color: originColor,
    })

    setIsShow(false)
    closePopups([fontModalId, colorModalId, id])
  }

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap xxxm mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
          <button
            className="modal-close"
            onClick={() => {
              setIsShow(false)
              closePopups([fontModalId, colorModalId, id])
            }}
          >
            닫기
          </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 ?? '',
                      fontWeight: originFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
                      fontStyle: originFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
                      fontSize: originFontSize?.value ?? '12px',
                      color: originFontColor?.value ?? 'black',
                    }}
                  >
                    9,999
                  </span>
                  <span
                    className="line"
                    style={{
                      backgroundColor: originColor,
                      borderColor: originColor,
                      height: originPixel.name,
                    }}
                  ></span>
                </div>
              </div>
            </div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act" onClick={onSave}>
              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}