"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var ComboBoxHeight = '32px';
var ComboBoxLineHeight = '30px';
var ComboxBoxCaretDownWidth = '32px';
var ComboBoxOptionHeight = '32px';
var getDisabledStyles = Utilities_1.memoizeFunction(function (theme) {
    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 _a;
});
var getListOptionHighContrastStyles = Utilities_1.memoizeFunction(function (theme) {
    return {
        selectors: (_a = {},
            _a[Styling_1.HighContrastSelector] = {
                backgroundColor: 'Highlight',
                borderColor: 'Highlight',
                color: 'HighlightText',
                MsHighContrastAdjust: 'none'
            },
            _a),
    };
    var _a;
});
exports.getOptionStyles = Utilities_1.memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption) {
    var semanticColors = theme.semanticColors, palette = theme.palette;
    var ComboBoxOptionBackgroundHovered = semanticColors.menuItemBackgroundHovered;
    var ComboBoxOptionTextColorHovered = semanticColors.bodyText;
    var ComboBoxOptionTextColorSelected = palette.black;
    var ComboBoxOptionTextColorDisabled = semanticColors.disabledText;
    var ComboBoxOptionBackgroundDisabled = semanticColors.bodyBackground;
    var ComboBoxOptionBorderColorFocused = palette.neutralSecondary;
    var optionStyles = {
        root: [
            {
                backgroundColor: 'transparent',
                boxSizing: 'border-box',
                cursor: 'pointer',
                display: 'block',
                width: '100%',
                height: 'auto',
                minHeight: ComboBoxOptionHeight,
                lineHeight: '20px',
                padding: '5px 16px',
                position: 'relative',
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: 'transparent',
                wordWrap: 'break-word',
                overflowWrap: 'break-word',
                textAlign: 'left',
                selectors: (_a = {},
                    _a[Styling_1.HighContrastSelector] = {
                        borderColor: 'Background'
                    },
                    _a)
            },
            Styling_1.getFocusStyle(theme),
        ],
        rootHovered: {
            backgroundColor: ComboBoxOptionBackgroundHovered,
            color: ComboBoxOptionTextColorHovered
        },
        rootFocused: {
            backgroundColor: ComboBoxOptionBackgroundHovered
        },
        rootChecked: [
            {
                backgroundColor: ComboBoxOptionBackgroundHovered,
                color: ComboBoxOptionTextColorSelected
            },
            Styling_1.getFocusStyle(theme),
            getListOptionHighContrastStyles(theme)
        ],
        rootDisabled: {
            backgroundColor: ComboBoxOptionBackgroundDisabled,
            color: ComboBoxOptionTextColorDisabled,
            cursor: 'default',
            selectors: {
                '& .ms-Button-flexContainer': {
                    justifyContent: 'flex-start'
                }
            }
        },
        optionText: {
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            minWidth: '0px',
            maxWidth: '100%',
            wordWrap: 'break-word',
            overflowWrap: 'break-word',
            margin: '1px',
        }
    };
    return Styling_1.concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
    var _a;
});
exports.getCaretDownButtonStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
    var semanticColors = theme.semanticColors;
    var caretButtonTextColor = semanticColors.bodySubtext;
    var caretButtonTextColorHoveredChecked = semanticColors.buttonTextChecked;
    var caretButtonBackgroundHovered = semanticColors.listItemBackgroundHovered;
    var caretButtonBackgroundChecked = semanticColors.listItemBackgroundChecked;
    var caretButtonBackgroundCheckedHovered = semanticColors.listItemBackgroundCheckedHovered;
    var styles = {
        root: {
            color: caretButtonTextColor,
            fontSize: Styling_1.FontSizes.small,
            position: 'absolute',
            height: ComboBoxHeight,
            lineHeight: ComboBoxLineHeight,
            width: ComboxBoxCaretDownWidth,
            textAlign: 'center',
            cursor: 'default',
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    backgroundColor: 'ButtonFace',
                    borderColor: 'ButtonText',
                    color: 'ButtonText',
                    MsHighContrastAdjust: 'none'
                },
                _a)
        },
        icon: {
            fontSize: Styling_1.FontSizes.small
        },
        rootHovered: {
            backgroundColor: caretButtonBackgroundHovered,
            color: caretButtonTextColorHoveredChecked,
            cursor: 'pointer'
        },
        rootPressed: {
            backgroundColor: caretButtonBackgroundChecked,
            color: caretButtonTextColorHoveredChecked
        },
        rootChecked: {
            backgroundColor: caretButtonBackgroundChecked,
            color: caretButtonTextColorHoveredChecked
        },
        rootCheckedHovered: {
            backgroundColor: caretButtonBackgroundCheckedHovered,
            color: caretButtonTextColorHoveredChecked
        },
        rootDisabled: getDisabledStyles(theme),
    };
    return Styling_1.concatStyleSets(styles, customStyles);
    var _a;
});
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {
    var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;
    var ComboBoxRootBackground = semanticColors.bodyBackground;
    var ComboBoxRootTextColor = semanticColors.bodyText;
    var ComboBoxRootBorderColor = semanticColors.inputBorder;
    var ComboBoxRootBorderColorHovered = semanticColors.inputBorderHovered;
    var ComboBoxRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
    var ComboBoxRootColorErrored = semanticColors.errorText;
    var ComboBoxCalloutBorderColor = palette.neutralLight;
    var ComboBoxOptionHeaderTextColor = semanticColors.menuHeader;
    var ComboBoxOptionDividerBorderColor = semanticColors.bodyDivider;
    var styles = {
        container: {},
        label: {},
        labelDisabled: {},
        root: [
            fonts.medium,
            {
                boxShadow: 'none',
                marginBottom: '10px',
                marginLeft: '0',
                paddingTop: '0',
                paddingRight: ComboxBoxCaretDownWidth,
                paddingBottom: '0',
                paddingLeft: '12px',
                color: ComboBoxRootTextColor,
                position: 'relative',
                outline: '0',
                userSelect: 'none',
                backgroundColor: ComboBoxRootBackground,
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: ComboBoxRootBorderColor,
                cursor: 'text',
                display: 'block',
                height: ComboBoxHeight,
                lineHeight: ComboBoxLineHeight,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                boxSizing: 'content-box',
                selectors: {
                    '.ms-Label': {
                        display: 'inline-block',
                        marginBottom: '8px',
                    },
                    'input': {
                        selectors: {
                            '::-ms-clear': {
                                display: 'none'
                            }
                        }
                    },
                    '&.is-open': {
                        borderColor: ComboBoxRootBorderColorFocused
                    }
                }
            }
        ],
        rootHovered: {
            borderColor: ComboBoxRootBorderColorHovered,
            selectors: (_a = {},
                _a[Styling_1.HighContrastSelector] = {
                    color: 'HighlightText',
                    borderColor: 'Highlight',
                    MsHighContrastAdjust: 'none'
                },
                _a),
        },
        rootPressed: {
            borderColor: ComboBoxRootBorderColorFocused
        },
        rootFocused: {
            borderColor: ComboBoxRootBorderColorFocused,
            selectors: (_b = {},
                _b[Styling_1.HighContrastSelector] = {
                    color: 'HighlightText',
                    borderColor: 'Highlight',
                    MsHighContrastAdjust: 'none'
                },
                _b),
        },
        rootDisabled: getDisabledStyles(theme),
        rootError: {
            borderColor: ComboBoxRootColorErrored,
            marginBottom: '5px'
        },
        rootDisallowFreeForm: {},
        input: {
            boxSizing: 'border-box',
            width: '100%',
            height: '30px',
            borderStyle: 'none',
            outline: 'none',
            font: 'inherit',
            textOverflow: 'ellipsis',
            padding: '0',
            margin: '1px 0px'
        },
        inputDisabled: getDisabledStyles(theme),
        errorMessage: {
            color: ComboBoxRootColorErrored
        },
        callout: {
            boxShadow: '0 0px 5px 0px rgba(0, 0, 0, 0.4)',
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: ComboBoxCalloutBorderColor,
        },
        optionsContainerWrapper: {
            width: comboBoxOptionWidth
        },
        optionsContainer: {
            display: 'block'
        },
        header: [
            fonts.medium,
            {
                fontWeight: Styling_1.FontWeights.semibold,
                color: ComboBoxOptionHeaderTextColor,
                backgroundColor: 'none',
                borderStyle: 'none',
                height: ComboBoxOptionHeight,
                lineHeight: ComboBoxOptionHeight,
                cursor: 'default',
                padding: '0px 16px',
                userSelect: 'none',
                textAlign: 'left'
            }
        ],
        divider: {
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: ComboBoxOptionDividerBorderColor
        }
    };
    return Styling_1.concatStyleSets(styles, customStyles);
    var _a, _b;
});
//# sourceMappingURL=ComboBox.styles.js.map