import { Tooltip } from "antd"
import React from "react"
import { SketchPicker } from 'react-color'
import style from './index.less'
type props = {
    onColor: (color: string) => void,
    color?: string
}

const ColorPicker = (props: props) => {
    let { onColor, color = "#000000" } = props

    return <Tooltip
        color="#FFF"
        title={<SketchPicker
            color={color}
            presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#CBEDBE', '#FFF4D9']}
            onChange={(e: any) => { onColor(e?.hex) }}
            className={style.sketchPicker}
        />}
        overlayInnerStyle={{ width: 255 }}
        trigger='click'>
        <div className={style.swatch}>
            <div className={style.color} style={{ backgroundColor: color }} />
        </div>
    </Tooltip>
}

export default React.memo(ColorPicker)