import * as React from 'react';
import { Box } from '../../../../components/Flex';
import clsx from 'clsx';
import { twMerge } from '../../../../twMerge';
const Glyphicon = ({ glyph, style }) => {
    return React.createElement("span", { style: style, className: `glyphicon glyphicon-${glyph}` });
};
const baseClassName = 'ab-Button twa:text-current';
export class ButtonBase extends React.Component {
    static defaultProps = {
        overrideDisableButton: false,
        toolTipAndText: '',
        glyph: '',
        displayMode: 'Glyph+Text',
        transformGlyph: false,
        accessLevel: 'Full',
        showDefaultStyle: false,
    };
    render() {
        let isDisabled;
        isDisabled = this.props.accessLevel == 'Hidden';
        if (this.props.overrideDisableButton || this.props.disabled) {
            isDisabled = true;
        }
        let text = this.props.children || this.props.toolTipAndText;
        if (this.props.overrideText) {
            text = this.props.overrideText;
        }
        let tooltip = this.props.toolTipAndText;
        if (this.props.overrideTooltip) {
            tooltip = this.props.overrideTooltip;
        }
        let hideToolTip = this.props.hideToolTip ? this.props.hideToolTip : false;
        let content;
        if (this.props.displayMode == 'Glyph') {
            if (this.props.transformGlyph) {
                content = React.createElement(Glyphicon, { glyph: this.props.glyph, style: { transform: 'scale(-1, 1)' } });
            }
            else {
                content = React.createElement(Glyphicon, { glyph: this.props.glyph });
            }
        }
        else if (this.props.displayMode == 'Text') {
            content = React.createElement("span", null, text);
        }
        else if (this.props.displayMode == 'Glyph+Text') {
            content = (React.createElement("div", null,
                React.createElement(Glyphicon, { glyph: this.props.glyph }),
                " ",
                text));
        }
        else if (this.props.displayMode == 'Text+Glyph') {
            content = (React.createElement("div", null,
                text,
                " ",
                React.createElement(Glyphicon, { glyph: this.props.glyph })));
        }
        if (this.props.icon) {
            content = (React.createElement(React.Fragment, null,
                this.props.iconPosition === 'end' ? text : null,
                " ",
                React.createElement(Glyphicon, { glyph: this.props.icon }),
                ' ',
                this.props.iconPosition !== 'end' ? text : null));
        }
        let button = (React.createElement(Box, { ...this.props, as: "button", style: this.props.style, className: twMerge(clsx(baseClassName, `${baseClassName}--size-normal`, `${baseClassName}--style-normal`, isDisabled ? `${baseClassName}--disabled` : `${baseClassName}--enabled`), this.props.className), disabled: isDisabled, onClick: this.props.onClick, onMouseDown: this.props.onMouseDown || ((e) => e.preventDefault()) }, content));
        let buttonwithtooltip = React.createElement("div", null, button);
        return hideToolTip ? button : buttonwithtooltip;
    }
}
