import React from 'react';
import PopoverNext from '../../PopoverNext';
import ColorPicker from '../../ColorPicker';
import DATA_HOOKS from '../DataHooks';
import { st, classes } from './ColorViewer.st.css.js';
import Color from 'color';
export class ColorViewer extends React.Component {
    constructor() {
        super(...arguments);
        this.contentRef = React.createRef();
        this._onDocumentKeyUp = event => {
            if (event.key !== 'Tab' ||
                !this.contentRef.current ||
                this.contentRef.current.contains(document.activeElement)) {
                return;
            }
            const { popoverProps, onTabOut } = this.props;
            popoverProps?.onTabOut?.(event);
            onTabOut(event);
        };
        this.onChange = _color => {
            const color = typeof _color === 'object' ? _color : Color(_color);
            this.props.onChange(color.alpha() === 0 ? '' : color.hex());
        };
    }
    componentDidUpdate(prevProps) {
        if (!prevProps.active && this.props.active) {
            document.addEventListener('keyup', this._onDocumentKeyUp);
        }
        else if (prevProps.active && !this.props.active) {
            document.removeEventListener('keyup', this._onDocumentKeyUp);
        }
    }
    componentWillUnmount() {
        document.removeEventListener('keyup', this._onDocumentKeyUp);
    }
    render() {
        const { value, disabled, active, onClick, onConfirm, onCancel, size, placement = 'bottom', appendTo = 'parent', onClickOutside, children, onAddColor, addTooltipContent, placeholder, popoverProps, } = this.props;
        // Extract Popover-only props not supported by PopoverNext to prevent spreading them
        const { onTabOut: _unusedTabOut, onClickOutside: _unusedClickOutside, ...restPopoverProps } = popoverProps;
        return (React.createElement(PopoverNext, { placement: placement, appendTo: appendTo, ...restPopoverProps, dataHook: DATA_HOOKS.COLOR_INPUT_POPOVER, showArrow: true, fixed: true, open: active, focusManagerEnabled: false, onOpenChange: (open, reason) => {
                if (!open) {
                    if (reason === 'outside-press' && active) {
                        onClickOutside?.();
                    }
                    else if (reason === 'escape-key') {
                        onCancel?.();
                    }
                }
            } },
            React.createElement(PopoverNext.Trigger, null,
                React.createElement("div", { onClick: disabled ? undefined : onClick, style: { backgroundColor: value }, className: st(classes.root, { size }), "data-size": size }, value === '' && (React.createElement("div", { "data-hook": DATA_HOOKS.COLOR_INPUT_VIEWER_LINE, className: classes.line })))),
            React.createElement(PopoverNext.Content, null,
                React.createElement("div", { ref: this.contentRef },
                    React.createElement(ColorPicker, { dataHook: DATA_HOOKS.COLOR_INPUT_COLOR_PICKER, showConverter: false, showInput: true, onCancel: onCancel, onChange: this.onChange, onConfirm: onConfirm, value: value, onAdd: onAddColor, allowEmpty: true, addTooltipContent: addTooltipContent, emptyPlaceholder: placeholder }, children)))));
    }
}
ColorViewer.defaultProps = {
    popoverProps: {},
};
//# sourceMappingURL=ColorViewer.js.map