"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIDefaultButton = exports.BASE_STYLES = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const UIContextualMenu_1 = require("../UIContextualMenu");
const UIInput_1 = require("../UIInput");
const Icons_1 = require("../Icons");
const VSCODE_BORDER_COLOR = 'var(--vscode-button-border, transparent)';
exports.BASE_STYLES = {
    color: 'var(--vscode-button-foreground)',
    checkedBorderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))',
    primary: {
        backgroundColor: 'var(--vscode-button-background)',
        disabledBorderColor: VSCODE_BORDER_COLOR,
        borderColor: VSCODE_BORDER_COLOR,
        hoverBackgroundColor: 'var(--vscode-button-hoverBackground)',
        hoverBorderColor: VSCODE_BORDER_COLOR
    },
    secondary: {
        backgroundColor: 'var(--vscode-button-secondaryBackground)',
        disabledBorderColor: VSCODE_BORDER_COLOR,
        borderColor: VSCODE_BORDER_COLOR,
        hoverBackgroundColor: 'var(--vscode-button-secondaryHoverBackground)',
        hoverBorderColor: VSCODE_BORDER_COLOR,
        color: 'var(--vscode-button-secondaryForeground)'
    },
    alert: {
        backgroundColor: 'var(--vscode-errorForeground)',
        disabledBorderColor: VSCODE_BORDER_COLOR,
        borderColor: VSCODE_BORDER_COLOR,
        hoverBackgroundColor: 'var(--vscode-editorError-foreground)',
        hoverBorderColor: VSCODE_BORDER_COLOR
    },
    transparent: {
        backgroundColor: 'transparent',
        disabledBorderColor: 'transparent',
        borderColor: 'transparent',
        hoverBackgroundColor: 'var(--vscode-toolbar-hoverBackground, var(--vscode-menubar-selectionBackground))',
        hoverBorderColor: 'var(--vscode-contrastActiveBorder, transparent)',
        hoverBorderStyle: 'dashed',
        color: 'var(--vscode-foreground)',
        checkedBackgroundColor: 'var(--vscode-button-background)',
        checkedColor: 'var(--vscode-button-foreground)',
        checkedBorderStyle: 'solid'
    }
};
const ICON_SELECTOR = 'svg > path, svg > rect';
/**
 * UIDefaultButton component
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
 *
 * @exports
 * @class UIDefaultButton
 * @extends {React.Component<UIDefaultButtonProps, {}>}
 */
class UIDefaultButton extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {UIDefaultButtonProps} props
     */
    constructor(props) {
        super(props);
        /**
         * Method returns styles of root button element.
         *
         * @param props Button props.
         * @returns Styles of root button element.
         */
        this.setStyle = (props) => {
            const { primary, alert, transparent } = props;
            const dividerStyle = {
                position: 'absolute',
                width: 1,
                right: 21,
                top: 0,
                bottom: 0,
                backgroundColor: 'var(--vscode-editor-background)'
            };
            const interactionStyles = {
                root: this.getInteractionStyle(false, primary, alert, transparent),
                checked: this.getInteractionStyle(true, primary, alert, transparent)
            };
            return {
                root: {
                    minWidth: 'initial',
                    height: 22,
                    fontSize: '13px',
                    fontWeight: 400,
                    borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
                    paddingLeft: 13,
                    paddingRight: 13,
                    // Add to use hard coded value here as Theia doesn't support these values correctly
                    // as on Theia
                    // `--vscode-button-secondaryBackground` does not exist and is replaced by:
                    // `--vscode-secondaryButton-background` = #ffffff
                    // `--vscode-secondaryButton-foreground` does not exist
                    // And on VSCode `--vscode-button-secondaryForeground` exist and is equal to `#ffffff`
                    // So if we use the declare Theia variable `--vscode-secondaryButton-background` it will be white on white!!!
                    // And to finish these stuff of course Theia mess with the highContrast theme as it does not have any of them.
                    // Theia colors are a mess!!!!
                    backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
                    borderColor: exports.BASE_STYLES.secondary.borderColor,
                    color: exports.BASE_STYLES.secondary.color,
                    ...(primary && {
                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
                        borderColor: exports.BASE_STYLES.primary.borderColor,
                        color: exports.BASE_STYLES.color
                    }),
                    // alert button
                    ...(alert && {
                        backgroundColor: exports.BASE_STYLES.alert.backgroundColor,
                        borderColor: exports.BASE_STYLES.alert.borderColor,
                        color: exports.BASE_STYLES.color
                    }),
                    // Transparent button
                    ...(transparent && {
                        backgroundColor: exports.BASE_STYLES.transparent.backgroundColor,
                        borderColor: exports.BASE_STYLES.transparent.borderColor,
                        color: exports.BASE_STYLES.transparent.color
                    }),
                    selectors: {
                        '.ms-Fabric--isFocusVisible &:focus:after': {
                            outlineColor: 'var(--vscode-focusBorder)',
                            inset: -3
                        }
                    }
                },
                flexContainer: {
                    height: 18
                },
                label: {
                    marginLeft: 0,
                    marginRight: 0,
                    fontWeight: 400,
                    lineHeight: 20,
                    whiteSpace: 'nowrap'
                },
                rootDisabled: {
                    opacity: '0.5 !important',
                    // Add to use hard coded value here as Theia doesn't support these values correctly
                    backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
                    borderColor: exports.BASE_STYLES.secondary.disabledBorderColor,
                    color: exports.BASE_STYLES.secondary.color,
                    ...(primary && {
                        opacity: '0.5 !important',
                        color: exports.BASE_STYLES.color,
                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
                        borderColor: exports.BASE_STYLES.primary.disabledBorderColor
                    }),
                    ...(alert && {
                        opacity: '0.5 !important',
                        color: exports.BASE_STYLES.color,
                        backgroundColor: exports.BASE_STYLES.alert.backgroundColor,
                        borderColor: exports.BASE_STYLES.alert.disabledBorderColor
                    }),
                    ...(transparent && {
                        color: exports.BASE_STYLES.transparent.color,
                        backgroundColor: exports.BASE_STYLES.transparent.backgroundColor,
                        borderColor: exports.BASE_STYLES.transparent.disabledBorderColor
                    })
                },
                rootPressed: interactionStyles.root,
                rootHovered: interactionStyles.root,
                icon: {
                    height: 16,
                    lineHeight: 16,
                    marginLeft: -3,
                    color: exports.BASE_STYLES.secondary.color,
                    selectors: {
                        [ICON_SELECTOR]: {
                            fill: exports.BASE_STYLES.secondary.color
                        }
                    },
                    ...(primary && {
                        color: exports.BASE_STYLES.color,
                        selectors: {
                            [ICON_SELECTOR]: {
                                fill: exports.BASE_STYLES.color
                            }
                        }
                    }),
                    ...(alert && {
                        color: exports.BASE_STYLES.color,
                        selectors: {
                            [ICON_SELECTOR]: {
                                fill: exports.BASE_STYLES.color
                            }
                        }
                    }),
                    ...(transparent && {
                        color: exports.BASE_STYLES.transparent.color,
                        selectors: {
                            [ICON_SELECTOR]: {
                                fill: exports.BASE_STYLES.transparent.color
                            }
                        }
                    })
                },
                menuIcon: {
                    selectors: {
                        'svg > path': {
                            fill: exports.BASE_STYLES.secondary.color
                        },
                        ...(primary && {
                            'svg > path': {
                                fill: exports.BASE_STYLES.color
                            }
                        }),
                        ...(alert && {
                            'svg > path': {
                                fill: exports.BASE_STYLES.color
                            }
                        })
                    }
                },
                rootChecked: {
                    backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
                    color: exports.BASE_STYLES.secondary.color,
                    borderColor: exports.BASE_STYLES.checkedBorderColor,
                    ...(primary && {
                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
                        color: exports.BASE_STYLES.color
                    }),
                    ...(alert && {
                        backgroundColor: exports.BASE_STYLES.alert.backgroundColor,
                        color: exports.BASE_STYLES.color
                    }),
                    ...(transparent && {
                        backgroundColor: exports.BASE_STYLES.transparent.checkedBackgroundColor,
                        color: exports.BASE_STYLES.transparent.checkedColor,
                        borderStyle: exports.BASE_STYLES.transparent.checkedBorderStyle
                    })
                },
                rootCheckedHovered: interactionStyles.checked,
                rootCheckedPressed: interactionStyles.checked,
                splitButtonMenuButton: {
                    padding: 6,
                    height: 22,
                    boxSizing: 'border-box',
                    borderRadius: `0 ${UIInput_1.COMMON_INPUT_STYLES.borderRadius}px ${UIInput_1.COMMON_INPUT_STYLES.borderRadius}px 0 !important`,
                    borderLeft: 'none',
                    outline: 'transparent',
                    userSelect: 'none',
                    display: 'inline-block',
                    textDecoration: 'none',
                    textAlign: 'center',
                    cursor: 'pointer',
                    verticalAlign: 'top',
                    width: 22,
                    marginLeft: -1,
                    marginTop: 0,
                    marginRight: 0,
                    marginBottom: 0,
                    backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
                    borderColor: exports.BASE_STYLES.primary.borderColor,
                    color: exports.BASE_STYLES.color,
                    selectors: {
                        '&:hover': {
                            color: exports.BASE_STYLES.color,
                            backgroundColor: 'var(--vscode-button-hoverBackground)',
                            borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
                            selectors: {
                                [ICON_SELECTOR]: {
                                    fill: exports.BASE_STYLES.color
                                }
                            }
                        }
                    }
                },
                splitButtonMenuButtonDisabled: {
                    opacity: '0.5 !important',
                    // Add to use hard coded value here as Theia doesn't support these values correctly
                    backgroundColor: 'var(--vscode-button-secondaryBackground,#5f6a79)',
                    borderColor: exports.BASE_STYLES.secondary.backgroundColor,
                    color: exports.BASE_STYLES.secondary.color,
                    ...(primary && {
                        color: exports.BASE_STYLES.color,
                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
                        borderColor: 'var(--vscode-button-background)'
                    }),
                    ...(alert && {
                        color: exports.BASE_STYLES.color,
                        backgroundColor: exports.BASE_STYLES.alert.backgroundColor,
                        borderColor: 'var(--vscode-button-background)'
                    })
                },
                splitButtonMenuFocused: {
                    selectors: {
                        '&:focus': {
                            color: 'red'
                        }
                    }
                },
                splitButtonMenuButtonExpanded: {
                    color: exports.BASE_STYLES.color,
                    backgroundColor: 'var(--vscode-button-hoverBackground)',
                    borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
                    selectors: {
                        [ICON_SELECTOR]: {
                            fill: exports.BASE_STYLES.color
                        },
                        '&:hover': {
                            color: exports.BASE_STYLES.color,
                            backgroundColor: 'var(--vscode-button-hoverBackground)',
                            borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
                            selectors: {
                                [ICON_SELECTOR]: {
                                    fill: exports.BASE_STYLES.color
                                }
                            }
                        }
                    }
                },
                splitButtonDivider: dividerStyle,
                splitButtonDividerDisabled: dividerStyle,
                splitButtonContainerFocused: {
                    '.ms-Fabric--isFocusVisible &:focus:after': {
                        border: 'none',
                        outlineColor: 'var(--vscode-focusBorder)',
                        inset: -2
                    }
                }
            };
        };
    }
    /**
     * Method returns styles for hover and press States of root button element.
     *
     * @param checked Is styles for checked state.
     * @param primary Is button primary.
     * @param alert Is button alert.
     * @param transparent Is button transparent.
     * @returns Styles for hover and press States of root button element.
     */
    getInteractionStyle(checked, primary, alert, transparent) {
        let styles = {
            color: exports.BASE_STYLES.secondary.color,
            backgroundColor: exports.BASE_STYLES.secondary.hoverBackgroundColor,
            borderColor: exports.BASE_STYLES.secondary.hoverBorderColor,
            selectors: {
                [ICON_SELECTOR]: {
                    fill: exports.BASE_STYLES.secondary.color
                }
            },
            ...(primary && {
                color: exports.BASE_STYLES.color,
                backgroundColor: exports.BASE_STYLES.primary.hoverBackgroundColor,
                borderColor: exports.BASE_STYLES.primary.hoverBorderColor,
                selectors: {
                    [ICON_SELECTOR]: {
                        fill: exports.BASE_STYLES.color
                    }
                }
            }),
            ...(alert && {
                color: exports.BASE_STYLES.color,
                backgroundColor: exports.BASE_STYLES.alert.hoverBackgroundColor,
                borderColor: exports.BASE_STYLES.alert.hoverBorderColor,
                selectors: {
                    [ICON_SELECTOR]: {
                        fill: exports.BASE_STYLES.color
                    }
                }
            }),
            ...(checked && {
                borderColor: exports.BASE_STYLES.checkedBorderColor
            })
        };
        if (transparent) {
            if (checked) {
                styles = {
                    ...styles,
                    color: exports.BASE_STYLES.color,
                    backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
                    borderColor: exports.BASE_STYLES.primary.borderColor,
                    selectors: {
                        [ICON_SELECTOR]: {
                            fill: exports.BASE_STYLES.color
                        }
                    }
                };
            }
            else {
                styles = {
                    ...styles,
                    color: exports.BASE_STYLES.transparent.color,
                    backgroundColor: exports.BASE_STYLES.transparent.hoverBackgroundColor,
                    borderColor: exports.BASE_STYLES.transparent.hoverBorderColor,
                    borderStyle: exports.BASE_STYLES.transparent.hoverBorderStyle,
                    selectors: {
                        [ICON_SELECTOR]: {
                            fill: exports.BASE_STYLES.transparent.color
                        }
                    }
                };
            }
        }
        if (checked) {
            styles = { ...styles, borderColor: exports.BASE_STYLES.checkedBorderColor };
        }
        return styles;
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const defaultMenuIconProps = this.props.menuProps?.items
            ? {
                // Overwrite build-in fluentui icon
                iconName: Icons_1.UiIcons.ArrowDown
            }
            : undefined;
        return (react_1.default.createElement(react_2.DefaultButton, { menuIconProps: defaultMenuIconProps, ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu }));
    }
}
exports.UIDefaultButton = UIDefaultButton;
//# sourceMappingURL=UIDefaultButton.js.map