define(["require", "exports", "../../Styling", "../../Utilities"], function (require, exports, Styling_1, Utilities_1) {
    "use strict";
    var _a, _b;
    Object.defineProperty(exports, "__esModule", { value: true });
    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 listOptionHighContrastStyles = {
        selectors: (_a = {},
            _a[Styling_1.HighContrastSelector] = {
                backgroundColor: 'Highlight',
                borderColor: 'Highlight',
                color: 'HighlightText',
                MsHighContrastAdjust: 'none'
            },
            _a)
    };
    var inputHighContrastStyles = {
        selectors: (_b = {},
            _b[Styling_1.HighContrastSelector] = {
                color: 'WindowText',
                backgroundColor: 'Window',
                MsHighContrastAdjust: 'none'
            },
            _b)
    };
    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['.ms-Checkbox-label'] = {
                            width: '100%'
                        },
                        _a)
                }
            ],
            rootHovered: {
                backgroundColor: option.backgroundHoveredColor,
                color: option.textHoveredColor
            },
            rootFocused: {
                backgroundColor: option.backgroundHoveredColor
            },
            rootChecked: [
                {
                    backgroundColor: 'transparent',
                    color: option.textSelectedColor,
                    selectors: {
                        ':hover': [
                            {
                                backgroundColor: option.backgroundHoveredColor
                            },
                            listOptionHighContrastStyles
                        ]
                    }
                },
                Styling_1.getFocusStyle(theme, { inset: -1, isFocusedOnly: false }),
                listOptionHighContrastStyles
            ],
            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, _b;
        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 buttonHighContrastStyles = {
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    backgroundColor: 'Highlight',
                    borderColor: 'Highlight',
                    color: 'HighlightText',
                    MsHighContrastAdjust: 'none'
                },
                _a)
        };
        var styles = {
            root: {
                color: caret.buttonTextColor,
                fontSize: fonts.small.fontSize,
                position: 'absolute',
                height: ComboBoxHeight,
                lineHeight: ComboBoxLineHeight,
                width: ComboBoxCaretDownWidth,
                textAlign: 'center',
                cursor: 'default',
                selectors: (_b = {},
                    _b[Styling_1.HighContrastSelector] = {
                        backgroundColor: 'ButtonFace',
                        borderColor: 'ButtonText',
                        color: 'ButtonText',
                        MsHighContrastAdjust: 'none'
                    },
                    _b)
            },
            icon: {
                fontSize: fonts.small.fontSize
            },
            rootHovered: [
                {
                    backgroundColor: caret.buttonBackgroundHoveredColor,
                    color: caret.buttonTextHoveredCheckedColor,
                    cursor: 'pointer'
                },
                buttonHighContrastStyles
            ],
            rootPressed: [
                {
                    backgroundColor: caret.buttonBackgroundCheckedColor,
                    color: caret.buttonTextHoveredCheckedColor
                },
                buttonHighContrastStyles
            ],
            rootChecked: [
                {
                    backgroundColor: caret.buttonBackgroundCheckedColor,
                    color: caret.buttonTextHoveredCheckedColor
                },
                buttonHighContrastStyles
            ],
            rootCheckedHovered: [
                {
                    backgroundColor: caret.buttonBackgroundCheckedHoveredColor,
                    color: caret.buttonTextHoveredCheckedColor
                },
                buttonHighContrastStyles
            ],
            rootDisabled: [
                getDisabledStyles(theme),
                {
                    position: 'absolute'
                }
            ]
        };
        return Styling_1.concatStyleSets(styles, customStyles);
    });
    exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {
        var _a, _b, _c, _d, _e;
        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 placeholderHighContrastStyles = {
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    color: 'GrayText'
                },
                _a)
        };
        var placeholderStyles = [
            {
                color: semanticColors.inputPlaceholderText
            },
            placeholderHighContrastStyles
        ];
        var placeholderStylesHovered = [
            {
                color: semanticColors.inputTextHovered
            },
            placeholderHighContrastStyles
        ];
        var disabledPlaceholderStyles = [
            {
                color: semanticColors.disabledText
            },
            placeholderHighContrastStyles
        ];
        var ComboBoxRootHighContrastFocused = {
            color: 'HighlightText',
            borderColor: 'Highlight',
            backgroundColor: 'Window',
            MsHighContrastAdjust: 'none'
        };
        var getFocusBorder = function (color) {
            var _a;
            return ({
                borderColor: color,
                selectors: {
                    ':after': {
                        pointerEvents: 'none',
                        content: "''",
                        position: 'absolute',
                        left: -1,
                        top: -1,
                        bottom: -1,
                        right: -1,
                        border: '2px solid ' + color,
                        borderRadius: effects.roundedCorner2,
                        selectors: (_a = {},
                            _a[Styling_1.HighContrastSelector] = {
                                borderColor: 'Highlight'
                            },
                            _a)
                    }
                }
            });
        };
        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,
                    cursor: 'text',
                    display: 'block',
                    height: ComboBoxHeight,
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    boxSizing: 'border-box',
                    borderWidth: '1px',
                    borderStyle: 'solid',
                    borderColor: root.borderColor,
                    borderRadius: effects.roundedCorner2,
                    selectors: {
                        '.ms-Label': {
                            display: 'inline-block',
                            marginBottom: '8px'
                        },
                        '&.is-open': {
                            borderColor: root.borderColor,
                            selectors: (_b = {},
                                _b[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                                _b)
                        }
                    }
                }
            ],
            rootHovered: {
                borderColor: root.borderHoveredColor,
                selectors: (_c = {
                        '.ms-ComboBox-Input': [
                            {
                                color: semanticColors.inputTextHovered
                            },
                            Styling_1.getPlaceholderStyles(placeholderStylesHovered),
                            inputHighContrastStyles
                        ]
                    },
                    _c[Styling_1.HighContrastSelector] = {
                        color: 'HighlightText',
                        backgroundColor: 'Window',
                        MsHighContrastAdjust: 'none',
                        borderColor: 'Highlight'
                    },
                    _c)
            },
            rootPressed: [
                {
                    position: 'relative',
                    selectors: (_d = {},
                        _d[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                        _d)
                },
                getFocusBorder(root.borderPressedColor)
            ],
            rootFocused: [
                {
                    selectors: (_e = {
                            '.ms-ComboBox-Input': [
                                {
                                    color: semanticColors.inputTextHovered
                                },
                                inputHighContrastStyles
                            ]
                        },
                        _e[Styling_1.HighContrastSelector] = ComboBoxRootHighContrastFocused,
                        _e)
                },
                getFocusBorder(root.borderFocusedColor)
            ],
            rootDisabled: getDisabledStyles(theme),
            rootError: {
                borderColor: root.erroredColor,
                selectors: {
                    ':hover': {
                        borderColor: semanticColors.inputBorderHovered
                    }
                }
            },
            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'
                        }
                    }
                },
                inputHighContrastStyles
            ],
            inputDisabled: [getDisabledStyles(theme), Styling_1.getPlaceholderStyles(disabledPlaceholderStyles)],
            errorMessage: [
                theme.fonts.small,
                {
                    color: root.erroredColor,
                    marginTop: '5px'
                }
            ],
            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