import { FontSizes, FontWeights, concatStyleSets, getFocusStyle, HighContrastSelector } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
var ComboBoxHeight = '32px';
var ComboBoxLineHeight = '30px';
var ComboxBoxCaretDownWidth = '32px';
var ComboBoxOptionHeight = '32px';
var getDisabledStyles = memoizeFunction(function (theme) {
    var semanticColors = theme.semanticColors;
    return {
        backgroundColor: semanticColors.disabledBackground,
        borderColor: semanticColors.disabledBackground,
        color: semanticColors.disabledText,
        cursor: 'default',
        selectors: (_a = {},
            _a[HighContrastSelector] = {
                borderColor: 'GrayText',
                color: 'GrayText'
            },
            _a)
    };
    var _a;
});
var getListOptionHighContrastStyles = memoizeFunction(function (theme) {
    return {
        selectors: (_a = {},
            _a[HighContrastSelector] = {
                backgroundColor: 'Highlight',
                borderColor: 'Highlight',
                color: 'HighlightText',
                MsHighContrastAdjust: 'none'
            },
            _a)
    };
    var _a;
});
export var getOptionStyles = memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption, isPending) {
    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 optionStyles = {
        root: [
            {
                backgroundColor: isPending ? ComboBoxOptionBackgroundHovered : '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[HighContrastSelector] = {
                        borderColor: 'Background'
                    },
                    _a)
            }
        ],
        rootHovered: {
            backgroundColor: ComboBoxOptionBackgroundHovered,
            color: ComboBoxOptionTextColorHovered
        },
        rootFocused: {
            backgroundColor: ComboBoxOptionBackgroundHovered
        },
        rootChecked: [
            {
                backgroundColor: ComboBoxOptionBackgroundHovered,
                color: ComboBoxOptionTextColorSelected
            },
            getFocusStyle(theme, undefined, undefined, undefined, undefined, undefined, false),
            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',
            display: 'inline-block'
        },
        optionTextWrapper: {
            maxWidth: '100%'
        }
    };
    return concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);
    var _a;
});
export var getCaretDownButtonStyles = 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: FontSizes.small,
            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: ComboxBoxCaretDownWidth,
            textAlign: 'center',
            cursor: 'default',
            selectors: (_a = {},
                _a[HighContrastSelector] = {
                    backgroundColor: 'ButtonFace',
                    borderColor: 'ButtonText',
                    color: 'ButtonText',
                    MsHighContrastAdjust: 'none'
                },
                _a)
        },
        icon: {
            fontSize: 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 concatStyleSets(styles, customStyles);
    var _a;
});
export var getStyles = 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 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: [
            fonts.medium,
            {
                boxShadow: 'none',
                marginLeft: '0',
                paddingTop: '1px',
                paddingBottom: '1px',
                paddingRight: ComboxBoxCaretDownWidth,
                paddingLeft: '12px',
                color: ComboBoxRootTextColor,
                position: 'relative',
                outline: '0',
                userSelect: 'none',
                backgroundColor: ComboBoxRootBackground,
                borderWidth: '1px',
                borderStyle: 'solid',
                borderColor: ComboBoxRootBorderColor,
                cursor: 'text',
                display: 'block',
                height: ComboBoxHeight,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                boxSizing: 'border-box',
                selectors: {
                    '.ms-Label': {
                        display: 'inline-block',
                        marginBottom: '8px'
                    },
                    input: {
                        selectors: {
                            '::-ms-clear': {
                                display: 'none'
                            }
                        }
                    },
                    '&.is-open': {
                        borderColor: ComboBoxRootBorderColorFocused,
                        selectors: (_a = {},
                            _a[HighContrastSelector] = ComboBoxRootHighContrastFocused,
                            _a)
                    }
                }
            }
        ],
        rootHovered: {
            borderColor: ComboBoxRootBorderColorHovered,
            selectors: (_b = {},
                _b[HighContrastSelector] = {
                    color: 'HighlightText',
                    borderColor: 'Highlight',
                    backgroundColor: 'Window',
                    MsHighContrastAdjust: 'none'
                },
                _b)
        },
        rootPressed: {
            borderColor: ComboBoxRootBorderColorFocused,
            selectors: (_c = {},
                _c[HighContrastSelector] = ComboBoxRootHighContrastFocused,
                _c)
        },
        rootFocused: {
            borderColor: ComboBoxRootBorderColorFocused,
            selectors: (_d = {},
                _d[HighContrastSelector] = ComboBoxRootHighContrastFocused,
                _d)
        },
        rootDisabled: getDisabledStyles(theme),
        rootError: {
            borderColor: ComboBoxRootColorErrored,
            marginBottom: '5px'
        },
        rootDisallowFreeForm: {},
        input: {
            boxSizing: 'border-box',
            width: '100%',
            height: '28px',
            borderStyle: 'none',
            outline: 'none',
            font: 'inherit',
            textOverflow: 'ellipsis',
            padding: '0'
        },
        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: 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 concatStyleSets(styles, customStyles);
    var _a, _b, _c, _d;
});
//# sourceMappingURL=ComboBox.styles.js.map