"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIIconButton = exports.UIIconButtonSizes = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const UIContextualMenu_1 = require("../UIContextualMenu");
var UIIconButtonSizes;
(function (UIIconButtonSizes) {
    UIIconButtonSizes["Default"] = "Default";
    UIIconButtonSizes["Wide"] = "Wide";
})(UIIconButtonSizes || (exports.UIIconButtonSizes = UIIconButtonSizes = {}));
/**
 * UIIconButton component.
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
 *
 * @exports
 * @class UIIconButton
 * @extends {React.Component<ButtonProps, {}>}
 */
class UIIconButton extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {ButtonProps} props
     */
    constructor(props) {
        super(props);
        this.setStyle = (props) => {
            const sizeType = props.sizeType ?? UIIconButtonSizes.Default;
            const width = sizeType === UIIconButtonSizes.Default ? 16 : 26;
            return {
                root: {
                    minWidth: 'initial',
                    height: 16,
                    width: width,
                    boxSizing: 'content-box',
                    padding: 3,
                    backgroundColor: 'transparent',
                    borderRadius: 4,
                    selectors: {
                        // Focus through tab navigation
                        '.ms-Fabric--isFocusVisible &:focus:after': {
                            outline: '1px solid var(--vscode-focusBorder)'
                        }
                    }
                },
                rootDisabled: {
                    backgroundColor: 'transparent',
                    opacity: '0.4'
                },
                rootHasMenu: {
                    width: width
                },
                rootHovered: {
                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
                    outline: '1px dashed var(--vscode-contrastActiveBorder)'
                },
                rootPressed: {
                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-activeBackground')
                },
                rootExpanded: {
                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
                    width: width
                },
                rootExpandedHovered: { backgroundColor: 'transparent' },
                flexContainer: {
                    width: '100%',
                    height: '100%',
                    pointerEvents: 'none'
                },
                icon: {
                    height: 16,
                    width: width,
                    lineHeight: 16,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                },
                iconHovered: {
                    backgroundColor: 'transparent'
                },
                menuIconExpanded: {
                    display: 'none'
                },
                menuIcon: {
                    display: 'none'
                },
                rootChecked: {
                    backgroundColor: 'var(--vscode-button-background)',
                    color: 'var(--vscode-button-foreground)',
                    outline: '1px solid var(--vscode-contrastActiveBorder)',
                    selectors: {
                        // Move focus border otside of root box, because selection background covers inner border
                        '.ms-Fabric--isFocusVisible &:focus:after': {
                            inset: '-1px'
                        }
                    }
                },
                rootCheckedHovered: {
                    backgroundColor: 'var(--vscode-button-background)',
                    outline: '1px dashed var(--vscode-contrastActiveBorder)'
                },
                iconChecked: {
                    color: 'var(--vscode-button-foreground)',
                    selectors: {
                        // Inherit color from icon
                        '> svg *': {
                            fill: 'currentColor'
                        }
                    }
                }
            };
        };
    }
    /**
     * Method which returns button interaction background with including fallback for old VSCode or BAS versions.
     *
     * @param {string} color First choise color.
     * @returns {string} CSS value for background color with fallback.
     */
    getButtonInteractionBackgroundColor(color) {
        return `var(${color}, var(--vscode-menubar-selectionBackground))`;
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        return react_1.default.createElement(react_2.IconButton, { ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu });
    }
}
exports.UIIconButton = UIIconButton;
//# sourceMappingURL=UIIconButton.js.map