//JIRA: UNT-3388, Author: Mithara Silva, Date: 06/09/2023=====
import React, { useState, useCallback } from 'react';
import { SketchPicker } from 'react-color';
import { makeStyles } from '@material-ui/core';
import { FluentIconButton } from '../buttons/FluentIconButton';
import { EyedropperIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    buttonContainer: {
        display: 'flex',
        alignItems: 'center'
    },
    color: {
        width: theme.spacing(3),
        height: theme.spacing(2),
        borderRadius: theme.spacing(0.25),
        background: (props) => {
            var _a;
            return ((_a = props.currentColor) === null || _a === void 0 ? void 0 : _a.hex) ? props.currentColor.hex : props.currentColor;
        }
    },
    swatch: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-around',
        background: '#fff',
        width: theme.spacing(3.5),
        height: theme.spacing(2.5),
        borderRadius: theme.spacing(0.25),
        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
        marginLeft: theme.spacing(0.5)
    },
    popover: {
        position: 'absolute',
        zIndex: '2'
    },
    cover: {
        position: 'fixed',
        top: '0px',
        right: '0px',
        bottom: '0px',
        left: '0px'
    }
}));
export const FluentColorPicker = (props) => {
    const { handleColorChange, onChange, value } = props;
    const [displayColorPicker, setDisplayColorPicker] = useState(false);
    const [currentColor, setCurrentColor] = useState(`${value ? ((value === null || value === void 0 ? void 0 : value.hex) ? value.hex : value) : ''}`);
    const classes = useStyles(Object.assign({ currentColor: currentColor }, props));
    const handleOpen = () => {
        setDisplayColorPicker(true);
    };
    const handleClose = () => {
        setDisplayColorPicker(false);
    };
    const handleChange = useCallback((newColor) => {
        if (handleColorChange) {
            handleColorChange(newColor);
        }
        else if (onChange) {
            onChange(newColor.hex);
        }
        setCurrentColor(newColor.hex);
    }, [handleColorChange, onChange]);
    return (React.createElement("div", null, React.createElement("div", { className: classes.buttonContainer }, React.createElement("div", null, React.createElement(FluentIconButton, { onClick: handleOpen, color: "primary", icon: EyedropperIcon })), React.createElement("div", { className: classes.swatch }, React.createElement("div", { className: classes.color }))), displayColorPicker ? (React.createElement("div", { className: classes.popover }, React.createElement("div", { className: classes.cover, onClick: handleClose }), React.createElement(SketchPicker, { color: currentColor, onChange: handleChange, disableAlpha: true }))) : null));
};
//# sourceMappingURL=FluentColorPicker.js.map