import React, { PureComponent } from 'react';
import { withFocusable } from '../common/Focusable';
import { AddSmall } from '@wix/wix-ui-icons-common';
import Color from 'color';
import { st, classes } from './ColorPickerConverter.st.css.js';
import Tooltip from '../Tooltip';
import { DataHooks } from './constants';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
function getContrastColor(bg, light = '#ffffff', dark = '#162d3d') {
    try {
        const color = Color(bg);
        const luminosity = color.luminosity();
        if (luminosity > 0.5) {
            return dark;
        }
        else {
            return light;
        }
    }
    catch (err) { }
}
class ColorPickerConverterViewer extends PureComponent {
    constructor() {
        super(...arguments);
        this.onAddClick = () => {
            const { color, onAdd } = this.props;
            const noColorSelected = color.alpha() === 0;
            !!onAdd && !noColorSelected && onAdd(color.hex());
        };
        this.addTooltip = element => {
            const { addTooltipContent } = this.props;
            return (React.createElement(Tooltip, { disabled: !addTooltipContent, content: addTooltipContent, size: "small" }, element));
        };
    }
    render() {
        const { color, onAdd, focusableOnFocus, focusableOnBlur, className } = this.props;
        const noColorSelected = color.alpha() === 0;
        const clickable = !!onAdd && !noColorSelected;
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => {
            const AddSmallIcon = icons.ColorPickerConverterViewer?.AddSmall || AddSmall;
            const viewer = React.createElement(clickable ? 'button' : 'div', {
                style: {
                    backgroundColor: noColorSelected ? undefined : color.hex(),
                },
                'data-hook': DataHooks.addColor,
                onFocus: focusableOnFocus,
                onBlur: focusableOnBlur,
                className: st(classes.preview, {
                    clickable,
                    noColorSelected,
                }, className),
                onClick: this.onAddClick,
            }, clickable && (React.createElement(AddSmallIcon, { style: { color: getContrastColor(color.hex()) } })));
            return clickable ? this.addTooltip(viewer) : viewer;
        }));
    }
}
export default withFocusable(ColorPickerConverterViewer);
//# sourceMappingURL=ColorPickerConverterViewer.js.map