"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var ComboBoxHeight = 32;
var ComboBoxLineHeight = 30;
var ComboBoxCaretDownWidth = 32;
var ComboBoxOptionHeight = 36;
var getDisabledStyles = Utilities_1.memoizeFunction(function (theme) {
    var _a;
    var semanticColors = theme.semanticColors;
    return {
        backgroundColor: semanticColors.disabledBackground,
        borderColor: semanticColors.disabledBackground,
        color: semanticColors.disabledText,
        cursor: 'default',
        selectors: (_a = {},
            _a[Styling_1.HighContrastSelector] = {
                borderColor: 'GrayText',
                color: 'GrayText'
            },
            _a)
    };
});
var getListOptionHighContrastStyles = Utilities_1.memoizeFunction(function (theme) {
    var _a;
    return {
        selectors: (_a = {},
            _a[Styling_1.HighContrastSelector] = {
                backgroundColor: 'Highlight',
                borderColor: 'Highlight',
                color: 'HighlightText',
                MsHighContrastAdjust: 'none'
            },
            _a)
    };
});
exports.getOptionStyles = Utilities_1.memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption, isPending, isHidden) {
    var _a;
    var palette = theme.palette, semanticColors = theme.semanticColors;
    var option = {
        textHoveredColor: semanticColors.menuItemTextHovered,
        textSelectedColor: palette.neutralDark,
        textDisabledColor: semanticColors.disabledText,
        backgroundHoveredColor: semanticColors.menuItemBackgroundHovered,
        backgroundPressedColor: semanticColors.menuItemBackgroundPressed
    };
    var optionStyles = {
        root: [
            theme.fonts.medium,
            {
                backgroundColor: isPending ? option.backgroundHoveredColor : 'transparent',
                boxSizing: 'border-box',
                cursor: 'pointer',
                display: isHidden ? 'none' : 'block',
                width: '100%',
                height: 'auto',
                minHeight: ComboBoxOptionHeight,
                lineHeight: '20px',
                padding: '0 8px',
                position: 'relative',
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: 'transparent',
                borderRadius: 0,
                wordWrap: 'break-word',
                overflowWrap: 'break-word',
                textAlign: 'left',
                selectors: (_a = {},
                    _a[Styling_1.HighContrastSelector] = {
                        borderColor: 'Background'
                    },
                    _a['&.ms-Checkbox'] = {
                        display: 'flex',
                        alignItems: 'center'
                    },
                    _a['&.ms-Button--command:hover:active'] = {
                        backgroundColor: option.backgroundPressedColor
                    },
                    _a)
            }
        ],
        rootHovered: {
            backgroundColor: option.backgroundHoveredColor,
            color: option.textHoveredColor
        },
        rootFocused: {
            backgroundColor: option.backgroundHoveredColor
        },
        rootChecked: [
            {
                backgroundColor: 'transparent',
                color: option.textSelectedColor,
                selectors: {
                    ':hover': {
                        backgroundColor: option.backgroundHoveredColor
                    }
                }
            },
            Styling_1.getFocusStyle(theme, { inset: -1, isFocusedOnly: false }),
            getListOptionHighContrastStyles(theme)
        ],
        rootDisabled: {
            color: option.textDisabledColor,
            cursor: 'default'
        },
        optionText: {
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            minWidth: '0px',
            maxWidth: '100%',
            wordWrap: 'break-word',
            overflowWrap: 'break-word',
            display: 'inline-block'
        },
        optionTextWrapper: {
            maxWidth: '100%',
            display: 'flex',
            alignItems: 'center'
        }
    };
    return Styling_1.concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
});
exports.getCaretDownButtonStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
    var _a;
    var semanticColors = theme.semanticColors, fonts = theme.fonts;
    var caret = {
        buttonTextColor: semanticColors.bodySubtext,
        buttonTextHoveredCheckedColor: semanticColors.buttonTextChecked,
        buttonBackgroundHoveredColor: semanticColors.listItemBackgroundHovered,
        buttonBackgroundCheckedColor: semanticColors.listItemBackgroundChecked,
        buttonBackgroundCheckedHoveredColor: semanticColors.listItemBackgroundCheckedHovered
    };
    var styles = {
        root: {
            color: caret.buttonTextColor,
            fontSize: fonts.small.fontSize,
            position: 'absolute',
            // The negative positioning accounts for the 1px root border now that box-sizing is border-box
            top: '-1px',
            right: '-1px',
            height: ComboBoxHeight,
            lineHeight: ComboBoxLineHeight,
            width: ComboBoxCaretDownWidth,
            textAlign: 'center',
            cursor: 'default',
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    backgroundColor: 'ButtonFace',
                    borderColor: 'ButtonText',
                    color: 'ButtonText',
                    MsHighContrastAdjust: 'none'
                },
                _a)
        },
        icon: {
            fontSize: fonts.small.fontSize
        },
        rootHovered: {
            backgroundColor: caret.buttonBackgroundHoveredColor,
            color: caret.buttonTextHoveredCheckedColor,
            cursor: 'pointer'
        },
        rootPressed: {
            backgroundColor: caret.buttonBackgroundCheckedColor,
            color: caret.buttonTextHoveredCheckedColor
        },
        rootChecked: {
            backgroundColor: caret.buttonBackgroundCheckedColor,
            color: caret.buttonTextHoveredCheckedColor
        },
        rootCheckedHovered: {
            backgroundColor: caret.buttonBackgroundCheckedHoveredColor,
            color: caret.buttonTextHoveredCheckedColor
        },
        rootDisabled: getDisabledStyles(theme)
    };
    return Styling_1.concatStyleSets(styles, customStyles);
});
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {
    var _a, _b, _c, _d;
    var semanticColors = theme.semanticColors, fonts = theme.fonts, effects = theme.effects;
    var root = {
        textColor: semanticColors.bodyText,
        borderColor: semanticColors.inputBorder,
        borderHoveredColor: semanticColors.inputBorderHovered,
        borderPressedColor: semanticColors.inputFocusBorderAlt,
        borderFocusedColor: semanticColors.inputFocusBorderAlt,
        backgroundColor: semanticColors.bodyBackground,
        erroredColor: semanticColors.errorText
    };
    var option = {
        headerTextColor: semanticColors.menuHeader,
        dividerBorderColor: semanticColors.bodyDivider
    };
    // placeholder style variables
    var placeholderStyles = {
        color: semanticColors.inputPlaceholderText
    };
    var placeholderStylesHovered = {
        color: semanticColors.inputTextHovered
    };
    var disabledPlaceholderStyles = {
        color: semanticColors.disabledText
    };
    var ComboBoxRootHighContrastFocused = {
        color: 'HighlightText',
        borderColor: 'Highlight',
        backgroundColor: 'Window',
        borderWidth: '2px',
        MsHighContrastAdjust: 'none',
        paddingLeft: '11px',
        paddingTop: '0',
        paddingBottom: '0',
        selectors: {
            '.ms-ComboBox-CaretDown-button': {
                // Negative positioning to account for the 2px border
                right: '-2px',
                top: '-2px'
            }
        }
    };
    var styles = {
        container: {},
        label: {},
        labelDisabled: {},
        root: [
            theme.fonts.medium,
            {
                boxShadow: 'none',
                marginLeft: '0',
                paddingTop: 1,
                paddingBottom: 1,
                paddingRight: ComboBoxCaretDownWidth,
                paddingLeft: 8,
                color: root.textColor,
                position: 'relative',
                outline: '0',
                userSelect: 'none',
                backgroundColor: root.backgroundColor,
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: root.borderColor,
                borderRadius: effects.roundedCorner2,
                cursor: 'text',
                display: 'block',
                height: ComboBoxHeight,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                boxSizing: 'border-box',
                selectors: {
                    '.ms-Label': {
                        display: 'inline-block',
                        marginBottom: '8px'
                    },
                    '&.is-open': {
                        borderColor: root.borderColor,
                        selectors: (_a = {},
                            _a[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                            _a)
                    }
                }
            }
        ],
        rootHovered: {
            borderColor: root.borderHoveredColor,
            selectors: (_b = {
                    '.ms-ComboBox-Input': [{ color: semanticColors.inputTextHovered }, Styling_1.getPlaceholderStyles(placeholderStylesHovered)]
                },
                _b[Styling_1.HighContrastSelector] = {
                    color: 'HighlightText',
                    borderColor: 'Highlight',
                    backgroundColor: 'Window',
                    MsHighContrastAdjust: 'none'
                },
                _b)
        },
        rootPressed: {
            borderColor: root.borderPressedColor,
            selectors: (_c = {},
                _c[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                _c)
        },
        rootFocused: {
            borderColor: root.borderFocusedColor,
            selectors: (_d = {
                    '.ms-ComboBox-Input': {
                        color: semanticColors.inputTextHovered
                    }
                },
                _d[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                _d)
        },
        rootDisabled: getDisabledStyles(theme),
        rootError: {
            borderColor: root.erroredColor,
            marginBottom: '5px'
        },
        rootDisallowFreeForm: {},
        input: [
            Styling_1.getPlaceholderStyles(placeholderStyles),
            {
                backgroundColor: root.backgroundColor,
                color: root.textColor,
                boxSizing: 'border-box',
                width: '100%',
                height: '28px',
                borderStyle: 'none',
                outline: 'none',
                font: 'inherit',
                textOverflow: 'ellipsis',
                padding: '0',
                selectors: {
                    '::-ms-clear': {
                        display: 'none'
                    }
                }
            }
        ],
        inputDisabled: [getDisabledStyles(theme), Styling_1.getPlaceholderStyles(disabledPlaceholderStyles)],
        errorMessage: [
            theme.fonts.small,
            {
                color: root.erroredColor
            }
        ],
        callout: {
            boxShadow: effects.elevation8
        },
        optionsContainerWrapper: {
            width: comboBoxOptionWidth
        },
        optionsContainer: {
            display: 'block'
        },
        header: [
            fonts.medium,
            {
                fontWeight: Styling_1.FontWeights.semibold,
                color: option.headerTextColor,
                backgroundColor: 'none',
                borderStyle: 'none',
                height: ComboBoxOptionHeight,
                lineHeight: ComboBoxOptionHeight,
                cursor: 'default',
                padding: '0 8px',
                userSelect: 'none',
                textAlign: 'left'
            }
        ],
        divider: {
            height: 1,
            backgroundColor: option.dividerBorderColor
        }
    };
    return Styling_1.concatStyleSets(styles, customStyles);
});
//# sourceMappingURL=ComboBox.styles.js.map