import React, { useState, FC, useEffect } from 'react'
import * as icons from '@ant-design/icons'

import { Button } from 'antd'
import configers from '../../configer'
import './index.scss'

const FBtn: FC = ({
  draggable=true,
  configer=configers,
  handleData
}) => {
  const { clazz, color, size, shape, icon, text } = configer
  const IconComps = icons[icon]

  const handleDrag = (e) => {
    // antdI本来应该是个数组的，因为一个组件可能包含多个antd的组件，外面可以扁平化啊
    const params = JSON.stringify({ type: 'other', id: 'FBtn', antdI: '', relate: 'all' })
    e.dataTransfer.setData('Text', params)
  }

  const getShape = (v) => {
    const cts = ['', 'round', 'circle']
    return cts[v]
  }

  const handleClick = () => {
    handleData && handleData()
  }

  useEffect(() => {
  }, [])

  return (
    <div
      draggable={draggable}
      onDragStart={(e) => { handleDrag(e) } }
      className={`cz-fbtn dragor ${clazz}`}
    >
      <Button
        onClick={handleClick}
        size={size}
        type={color ? 'primary' : ''}
        shape={ getShape(shape) }
        { ...{ icon: icon.length ? <IconComps /> : null } }
      >{text}</Button>
    </div>
  );

}

export default FBtn