import WithDraggable from '@/components/common/draggable/withDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'
import { useMessage } from '@/hooks/useMessage'

const fonts = [
  { name: 'MS PGothic', value: 'MS PGothic' },
  { name: '@Yu Gothic', value: '@Yu Gothic' },
  { name: 'Yu Gothic', value: 'Yu Gothic' },
  { name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
  { name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
]
const fontOptions = [
  { name: '보통', value: 'normal' },
  { name: '기울임꼴', value: 'italic' },
  {
    name: '굵게',
    value: 'bold',
  },
  { name: '굵은 기울임꼴', value: 'boldAndItalic' },
]
const fontSizes = [
  ...Array.from({ length: 4 }).map((_, index) => {
    return { name: index + 8, value: index + 8 }
  }),
  ...Array.from({ length: 9 }).map((_, index) => {
    return { name: (index + 6) * 2, value: (index + 6) * 2 }
  }),
  { name: 36, value: 36 },
  { name: 48, value: 48 },
  { name: 72, value: 72 },
]
const fontColors = [
  { name: '검정색', value: 'black' },
  { name: '빨강색', value: 'red' },
  { name: '파랑색', value: 'blue' },
  { name: '회색', value: 'gray' },
  { name: '황색', value: 'yellow' },
  { name: '녹색', value: 'green' },
  { name: '분홍색', value: 'pink' },
  { name: '황금색', value: 'gold' },
  { name: '남색', value: 'darkblue' },
]
export default function FontSetting(props) {
  const { id, setIsShow, font, setFont, fontSize, setFontSize, pos = { x: 455, y: 180 } } = props
  const { getMessage } = useMessage()
  const { closePopup } = usePopup()
  const [originFont, setOriginFont] = useState(font)
  const [originFontSize, setOriginFontSize] = useState(fontSize)
  const [selectedFont, setSelectedFont] = useState(font ? font : fonts[0])
  const [selectedFontSize, setSelectedFontSize] = useState(fontSize ? fontSize : fontSizes[0])
  const [selectedFontColor, setSelectedFontColor] = useState(null)
  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={() => {
              setIsShow(false)
              closePopup(id)
            }}
          >
            닫기
          </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} onChange={(e) => setSelectedFont(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 ?? '',
                    fontSize: selectedFontSize?.value ?? '12px',
                    fontWeight: '400',
                    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={() => {
                setIsShow(false)
                setFont(selectedFont)
                setFontSize(selectedFontSize)
                closePopup(id)
              }}
            >
              {getMessage('modal.common.save')}
            </button>
          </div>
        </div>
      </div>
    </WithDraggable>
  )
}