import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { usePopup } from '@/hooks/usePopup'
import { useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
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' },
]

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 FontSetting(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false, onSave, font } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const [selectedFont, setSelectedFont] = useState(font.fontFamily)
  const [selectedFontWeight, setSelectedFontWeight] = useState(font.fontWeight)
  const [selectedFontSize, setSelectedFontSize] = useState(font.fontSize)
  const [selectedFontColor, setSelectedFontColor] = useState(font.fontColor)

  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' },
  ]

  const handleSaveBtn = () => {
    onSave({
      fontFamily: selectedFont,
      fontWeight: selectedFontWeight,
      fontSize: selectedFontSize,
      fontColor: selectedFontColor,
    })
    if (setIsShow) setIsShow(false)
    closePopup(id, isConfig)
  }

  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap lrr mount`}>
        <div className="modal-head">
          <h1 className="title">{getMessage('modal.font')}</h1>
          <button
            className="modal-close"
            onClick={() => {
              if (setIsShow) setIsShow(false)
              closePopup(id, isConfig)
            }}
          >
            닫기
          </button>
        </div>
        <div className="modal-body">
          <div className="slope-wrap">
            <div className="font-option-warp">
              <div className="font-option-item">
                <div className="option-item-tit">{getMessage('modal.font')}(F)</div>
                <div className="grid-select">
                  <QSelectBox options={fonts} value={selectedFont} onChange={(e) => setSelectedFont(e)} />
                </div>
              </div>
              <div className="font-option-item">
                <div className="option-item-tit">{getMessage('modal.font.style')}(Y)</div>
                <div className="grid-select">
                  <QSelectBox options={fontOptions} value={selectedFontWeight} onChange={(e) => setSelectedFontWeight(e)} />
                </div>
              </div>
              <div className="font-option-item">
                <div className="option-item-tit">{getMessage('modal.font.size')}(S)</div>
                <div className="grid-select">
                  <QSelectBox options={fontSizes} value={selectedFontSize} onChange={(e) => setSelectedFontSize(e)} />
                </div>
              </div>
              <div className="font-option-item">
                <div className="option-item-tit">{getMessage('modal.font.color')}</div>
                <div className="grid-select">
                  <QSelectBox title={''} options={fontColors} value={selectedFontColor} onChange={(e) => setSelectedFontColor(e)} />
                </div>
              </div>
            </div>
            <div className="font-ex-wrap">
              <div className="font-ex-tit">{getMessage('modal.font.setting.display')}</div>
              <div className="font-ex-box">
                <span
                  style={{
                    fontFamily: selectedFont?.value ?? 'MS PGothic',
                    fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
                    fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
                    fontSize: selectedFontSize?.value ?? 16,
                    color: selectedFontColor?.value ?? 'black',
                  }}
                >
                  Aaあぁアァ
                </span>
              </div>
            </div>
            <div className="normal-font">{getMessage('modal.font.setting.info')}</div>
          </div>
          <div className="grid-btn-wrap">
            <button className="btn-frame modal act" onClick={handleSaveBtn}>
              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}