import React from 'react';
import { withFocusable } from '../common/Focusable';
import { Add as IconAdd, AddSmall as IconAddSmall, } from '@wix/wix-ui-icons-common';
import { st, classes } from './FillButton.st.css.js';
import Tooltip from '../Tooltip';
import Proportion from '../Proportion';
import { dataHooks } from './constants';
import { parseColor, parseGradient, parseContrastColor } from './utils';
import { IconThemeContext } from '../WixDesignSystemIconThemeProvider/IconThemeContext';
const { iconSmall, iconMedium } = dataHooks;
/** FillButton */
class FillButton extends React.PureComponent {
    constructor() {
        super(...arguments);
        this._getBackground = fill => {
            const { disabled } = this.props;
            if (parseColor(fill) && !disabled) {
                return { backgroundColor: fill };
            }
            if (parseGradient(fill) && !disabled) {
                return {
                    backgroundImage: fill,
                };
            }
            return undefined;
        };
        this._renderIcon = (icons = {}) => {
            const { iconSize, fill, disabled, icon } = this.props;
            const iconStyle = { color: !disabled && parseContrastColor(fill) };
            if (icon) {
                return React.cloneElement(icon, {
                    style: iconStyle,
                });
            }
            const AddIcon = iconSize === 'small'
                ? icons.FillButton?.AddSmall || IconAddSmall
                : icons.FillButton?.Add || IconAdd;
            return (React.createElement(AddIcon, { style: iconStyle, "data-hook": iconSize === 'small' ? iconSmall : iconMedium }));
        };
    }
    render() {
        const { disabled, focusableOnBlur, focusableOnFocus, dataHook, fill, iconSize, tooltipContent, tooltipProps = {}, className, ...rest } = this.props;
        const background = this._getBackground(fill);
        // For backwards compatibility
        const content = tooltipProps.content || tooltipContent;
        return (React.createElement(IconThemeContext.Consumer, null, ({ icons = {} }) => (React.createElement(Tooltip, { appendTo: "window", disabled: disabled, ...tooltipProps, content: content, dataHook: dataHook, size: "small" },
            React.createElement(Proportion, { className: classes.proportion },
                React.createElement("button", { ...rest, className: st(classes.root, { disabled, fill: !!background }, className), style: { ...background }, "data-hook": dataHooks.button, onFocus: focusableOnFocus, onBlur: focusableOnBlur, disabled: disabled, type: "button" }, this._renderIcon(icons)))))));
    }
}
FillButton.displayName = 'FillButton';
FillButton.defaultProps = {
    iconSize: 'small',
};
export default withFocusable(FillButton);
//# sourceMappingURL=FillButton.js.map