"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.baseClassName = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("../icons");
const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
const Icon_1 = require("../Icon");
const Flex_1 = require("../Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const twUtils_1 = require("../twUtils");
exports.baseClassName = 'ab-SimpleButton';
const SimpleButton = React.forwardRef((givenProps, theRef) => {
    const props = { ...givenProps };
    let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type, ...buttonProps } = props;
    let adaptableSystemIcon;
    if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
        adaptableSystemIcon = icon;
    }
    if (typeof icon === 'string' && icons_1.allIcons[icon]) {
        adaptableSystemIcon = { name: icon };
    }
    if (adaptableSystemIcon) {
        const iconProps = {
            icon: adaptableSystemIcon,
        };
        if (iconSize) {
            iconProps.icon = { ...iconProps.icon, size: iconSize };
        }
        if (typeof buttonProps.color === 'string') {
            iconProps.icon = { ...iconProps.icon, style: { color: buttonProps.color } };
        }
        icon = React.createElement(Icon_1.IconComponent, { ...iconProps });
    }
    if ((0, Icon_1.isAdaptableCustomIcon)(icon) || (0, Icon_1.isAdaptableElementIcon)(icon)) {
        icon = React.createElement(Icon_1.IconComponent, { icon: icon });
    }
    if (icon) {
        children =
            iconPosition === 'start' ? (React.createElement(React.Fragment, null,
                icon,
                children)) : (React.createElement(React.Fragment, null,
                children,
                icon));
    }
    if (buttonProps.as == 'div') {
        // we have some cases when we want to nest a SimpleButton inside an html Button
        // so the SimpleButton cannot render a <button> tag
        // so we want it to be a DIV tag
        // but still keep the same keyboard accessibility
        buttonProps.tabIndex = buttonProps.tabIndex === undefined ? 0 : buttonProps.tabIndex;
        buttonProps.role = buttonProps.role || 'button';
        const onKeyDown = buttonProps.onKeyDown;
        buttonProps.onKeyDown = (e) => {
            const key = e.key;
            if (buttonProps.onClick && key === 'Enter') {
                buttonProps.onClick(e);
            }
            if (onKeyDown) {
                onKeyDown(e);
            }
        };
    }
    if (!buttonProps.as || buttonProps.as === 'button') {
        buttonProps.type = type ? type : 'button';
        buttonProps.as = 'button';
    }
    if (accessLevel === 'Hidden') {
        return null;
    }
    if (accessLevel === 'ReadOnly') {
        disabled = true;
    }
    const ariaLabel = buttonProps['aria-label'] ||
        buttonProps.label ||
        tooltip ||
        buttonProps.title ||
        `${buttonProps.key}`;
    const extraButtonProps = {};
    if (ariaLabel != null && ariaLabel !== '') {
        extraButtonProps['aria-label'] = ariaLabel;
    }
    const btn = (React.createElement(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, clsx_1.default)(exports.baseClassName, 'twa:p-1', 'twa:rounded-standard', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
        // direct children should be above the before pseudo element
        'twa:*:z-1', 
        // all svgs inside should be aligned middle
        'twa:[&_svg]:align-middle', 
        // 'twa:text-text-on-primary',
        // the text variant has the background applied on the before pseudo element
        // so let's configure the before pseudo element for all buttons here
        'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 
        // focus shadow
        twUtils_1.targetOwn.focusOutline, disabled ? `${exports.baseClassName}--disabled` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
            'twa:text-text-on-primary': tone == 'neutral',
            'twa:text-inherit': tone === 'none',
            'twa:text-success': tone === 'success',
            'twa:text-accent': tone === 'accent',
            'twa:text-error': tone === 'error',
            'twa:text-warn': tone === 'warning',
            'twa:text-info': tone === 'info',
        }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'outlined'
            ? 'twa:bg-defaultbackground twa:border-inputborder twa:border'
            : '', variant === 'raised'
            ? {
                'twa:text-text-on-primary twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
                'twa:bg-success twa:text-text-on-success': tone == 'success',
                'twa:bg-accent twa:text-accent-foreground': tone == 'accent',
                'twa:bg-transparent': tone == 'none',
                'twa:bg-primary twa:text-text-on-primary': tone == 'neutral',
                'twa:bg-error twa:text-text-on-error': tone == 'error',
                'twa:bg-warn twa:text-text-on-warn': tone == 'warning',
                'twa:bg-info twa:text-text-on-info': tone == 'info',
            }
            : '', 
        // opacity transitioning for the background applied on the before pseudo element
        variant === 'outlined' || variant === 'text'
            ? {
                'twa:before:opacity-0 twa:before:transition-opacity twa:before:duration-200': true,
                'twa:hover:before:opacity-15 twa:hover:before:bg-current': !disabled,
            }
            : null, {
            'twa:cursor-pointer': !disabled,
            'twa:opacity-50': disabled,
        }, className), ref: theRef }, children));
    return tooltip ? React.createElement(Tooltip_1.default, { label: tooltip }, btn) : btn;
});
exports.default = SimpleButton;
