/** @format */
import * as React from 'react';
import {SketchPicker, ColorChangeHandler, ColorResult} from 'react-color';
import {INIT_THEMECOLORS} from '../../const/status';
import styles from './index.module.scss';
type colorKeys = keyof typeof INIT_THEMECOLORS;
interface Iprops {
    color: string;
    name: colorKeys;
    onChange: (color: string) => void;
    visible: boolean;
    handleUpdateVisible: () => void;
}
const colorPicker: React.FC<Iprops> = props => {
    const onChange: ColorChangeHandler = (color: ColorResult) => {
        props.onChange(color.hex);
    };

    return (
        <div className={styles.wrapper}>
            <div
                className={styles.cover}
                onClick={event => {
                    event.stopPropagation();
                    props.handleUpdateVisible();
                }}
            >
                <div style={{background: props.color}} />
            </div>
            <span>{props.name}</span>
            {props.visible ? (
                <div className={styles.colorPicker}>
                    <SketchPicker color={props.color} onChange={onChange} />
                </div>
            ) : null}
        </div>
    );
};
export default colorPicker;
