import React from 'react';
import color from 'color';
import ColorPickerHsb from './ColorPickerHsb';
import ColorPickerHue from './ColorPickerHue';
import ColorPickerHistory from './ColorPickerHistory';
import ColorPickerConverter from './ColorPickerConverter';
import ColorPickerActions from './ColorPickerActions';
import { classes, st } from './ColorPicker.st.css.js';
import { safeColor, isTransparent } from './utils';
import { DataHooks } from './constants';
const FALLBACK_COLOR = color('#86c6e5');
/**
 * Color Picker
 *
 * Under the hood uses color manipulation library [https://github.com/Qix-/color](https://github.com/Qix-/color).
 * Value for this component can be given in `string` or `object` format.
 * The callbacks always respond with color `object` format.
 */
class ColorPicker extends React.PureComponent {
    constructor(props) {
        super(props);
        this._renderChildren = () => {
            const { children } = this.props;
            const childrenInterface = {
                changeColor: _color => {
                    try {
                        let colorObject = _color;
                        if (typeof _color !== 'object') {
                            colorObject = _color === '' ? color().fade(1) : color(_color);
                        }
                        this.change(colorObject);
                    }
                    catch (err) { }
                },
            };
            if (typeof children === 'function') {
                return children(childrenInterface);
            }
            return children;
        };
        /**
         * sets the selected color
         * @param {object} color - An object that contains data for the selected color, model, and valpha.
         */
        this.change = _color => {
            this.setState({ current: _color }, () => {
                this.props.onChange(_color);
                // Auto-confirm when action buttons are hidden
                if (!this.props.showActionButtons) {
                    this.confirm();
                }
            });
        };
        /**
         * confirms the selected color
         */
        this.confirm = () => {
            this.setState({ previous: this.state.current });
            this.props.onConfirm(this.state.current);
        };
        /**
         * cancels the selected color
         */
        this.cancel = () => {
            this.props.onCancel(this.state.previous);
        };
        /**
         * Sets focus on the first interactive element inside ColorPicker
         */
        this.focus = () => {
            this.hsbRef.current && this.hsbRef.current.focus();
        };
        const _color = safeColor(props.value, props.allowEmpty) || FALLBACK_COLOR;
        this.state = { current: _color, previous: _color };
        this.hsbRef = React.createRef();
    }
    render() {
        const { showHistory, showInput, showConverter, showActionButtons, showEyeDropper, eyeDropperLabel, children, value, onAdd, addTooltipContent, allowEmpty, emptyPlaceholder, dataHook, removePadding, } = this.props;
        const { current, previous } = this.state;
        return (React.createElement("div", { className: st(classes.root, { noPadding: removePadding }), "data-hook": dataHook, role: "group", "aria-label": "Color picker" },
            React.createElement("div", null,
                React.createElement(ColorPickerHsb, { ref: this.hsbRef, dataHook: DataHooks.hsb, current: current, onChange: this.change }),
                React.createElement(ColorPickerHue, { dataHook: DataHooks.hue, current: current, onChange: this.change, showHistory: showHistory }),
                React.createElement(ColorPickerHistory, { show: showHistory, current: current, previous: previous, onClick: this.change })),
            React.createElement(ColorPickerConverter, { dataHook: DataHooks.converter, showConverter: showConverter, showInput: showInput, current: current, onChange: this.change, onEnter: this.confirm, onAdd: onAdd, addTooltipContent: addTooltipContent, allowEmpty: allowEmpty, hexPlaceholder: emptyPlaceholder, showEyeDropper: showEyeDropper, eyeDropperLabel: eyeDropperLabel }),
            children && (React.createElement("div", { className: classes.children, "data-hook": DataHooks.children }, this._renderChildren())),
            showActionButtons && (React.createElement(ColorPickerActions, { disabled: !allowEmpty && value === '', onConfirm: this.confirm, onCancel: this.cancel }))));
    }
    UNSAFE_componentWillReceiveProps(props) {
        const _color = safeColor(props.value, props.allowEmpty);
        if (!_color)
            return;
        if (_color.hex() !== this.state.current.hex() ||
            isTransparent(_color) !== isTransparent(this.state.current)) {
            this.setState({ current: _color });
        }
    }
}
ColorPicker.displayName = 'ColorPicker';
ColorPicker.defaultProps = {
    showHistory: false,
    showConverter: true,
    showInput: true,
    showActionButtons: true,
    allowEmpty: false,
    showEyeDropper: false,
    eyeDropperLabel: 'Sample color',
    removePadding: false,
    onChange: () => { },
    onCancel: () => { },
    onConfirm: () => { },
};
export default ColorPicker;
//# sourceMappingURL=ColorPicker.js.map