"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIActionButton = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const UIContextualMenu_1 = require("../UIContextualMenu");
const UIDefaultButton_1 = require("./UIDefaultButton");
/**
 * UIActionButton component
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
 *
 * @exports
 * @class UIActionButton
 * @extends {React.Component<IButtonProps, {}>}
 */
class UIActionButton extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {IButtonProps} props
     */
    constructor(props) {
        super(props);
        this.setStyle = () => {
            return {
                root: {
                    minWidth: 'initial',
                    minHeight: UIDefaultButton_1.BASE_STYLES.height,
                    height: UIDefaultButton_1.BASE_STYLES.height,
                    fontSize: '13px',
                    fontWeight: 400,
                    color: 'var(--vscode-foreground)',
                    borderRadius: 0,
                    whiteSpace: 'nowrap',
                    backgroundColor: 'transparent',
                    textDecoration: 'underline',
                    selectors: {
                        '&:active': {
                            textDecoration: 'none'
                        },
                        // Focus through tab navigation
                        '.ms-Fabric--isFocusVisible &:focus:after': {
                            outline: '1px solid var(--vscode-focusBorder)'
                        }
                    }
                },
                label: {
                    marginLeft: 0,
                    marginRight: 0,
                    fontSize: '13px',
                    fontWeight: 400
                },
                rootDisabled: {
                    backgroundColor: 'transparent',
                    color: 'var(--vscode-foreground)',
                    opacity: '0.4',
                    pointerEvents: 'none'
                },
                rootHovered: {
                    color: 'var(--vscode-foreground)',
                    backgroundColor: 'var(--vscode-menubar-selectionBackground)',
                    outline: '1px solid var(--vscode-contrastActiveBorder)',
                    borderRadius: 3,
                    textDecoration: 'none',
                    selectors: {
                        color: 'var(--vscode-foreground)'
                    }
                },
                icon: {
                    height: 16,
                    lineHeight: 16,
                    marginLeft: 0,
                    position: 'relative',
                    top: 1
                },
                menuIcon: {
                    position: 'relative',
                    top: 1
                }
            };
        };
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        return react_1.default.createElement(react_2.ActionButton, { ...this.props, styles: this.setStyle(), menuAs: UIContextualMenu_1.UIContextualMenu });
    }
}
exports.UIActionButton = UIActionButton;
//# sourceMappingURL=UIActionButton.js.map