import * as tslib_1 from "tslib";
import { FontSizes, FontWeights, HighContrastSelector, getGlobalClassNames, normalize } from '../../Styling';
var GlobalClassNames = {
    root: 'ms-Dropdown-container',
    label: 'ms-Dropdown-label',
    dropdown: 'ms-Dropdown',
    title: 'ms-Dropdown-title',
    caretDownWrapper: 'ms-Dropdown-caretDownWrapper',
    caretDown: 'ms-Dropdown-caretDown',
    callout: 'ms-Dropdown-callout',
    panel: 'ms-Dropdown-panel',
    dropdownItems: 'ms-Dropdown-items',
    dropdownItem: 'ms-Dropdown-item',
    dropdownDivider: 'ms-Dropdown-divider',
    dropdownOptionText: 'ms-Dropdown-optionText',
    dropdownItemHeader: 'ms-Dropdown-header',
    titleIsPlaceHolder: 'ms-Dropdown-titleIsPlaceHolder',
    titleHasError: 'ms-Dropdown-title--hasError'
};
var DROPDOWN_HEIGHT = 32;
var DROPDOWN_ITEM_HEIGHT = 32;
var highContrastAdjustMixin = {
    // highContrastAdjust mixin
    '@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: black-on-white)': {
        MsHighContrastAdjust: 'none'
    }
};
var highContrastItemAndTitleStateMixin = {
    selectors: tslib_1.__assign((_a = {}, _a[HighContrastSelector] = {
        backgroundColor: 'Highlight',
        borderColor: 'Highlight',
        color: 'HighlightText',
        selectors: {
            ':hover': {
                color: 'HighlightText' // overrides the hover styling for buttons that are also selected
            }
        }
    }, _a), highContrastAdjustMixin)
};
var highContrastBorderState = {
    selectors: (_b = {},
        _b[HighContrastSelector] = {
            borderColor: 'Highlight'
        },
        _b)
};
export var getStyles = function (props) {
    var theme = props.theme, hasError = props.hasError, className = props.className, isOpen = props.isOpen, disabled = props.disabled, required = props.required, isRenderingPlaceholder = props.isRenderingPlaceholder, panelClassName = props.panelClassName, calloutClassName = props.calloutClassName;
    if (!theme) {
        throw new Error('theme is undefined or null in base Dropdown getStyles function.');
    }
    var globalClassnames = getGlobalClassNames(GlobalClassNames, theme);
    var palette = theme.palette, semanticColors = theme.semanticColors;
    var rootHoverFocusActiveSelectorNeutralDarkMixin = {
        color: palette.neutralDark
    };
    var rootHoverFocusActiveSelectorBodySubtextMixin = {
        color: semanticColors.bodySubtext
    };
    var borderColorError = {
        borderColor: semanticColors.errorText
    };
    var dropdownItemStyle = [
        globalClassnames.dropdownItem,
        {
            backgroundColor: 'transparent',
            boxSizing: 'border-box',
            cursor: 'pointer',
            display: 'block',
            padding: '4px 16px',
            width: '100%',
            minHeight: DROPDOWN_ITEM_HEIGHT,
            lineHeight: 20,
            height: 'auto',
            position: 'relative',
            border: '1px solid transparent',
            wordWrap: 'break-word',
            overflowWrap: 'break-word',
            textAlign: 'left'
        }
    ];
    var dropdownItemSelected = dropdownItemStyle.concat([
        {
            backgroundColor: palette.neutralQuaternaryAlt,
            color: palette.black
        },
        highContrastItemAndTitleStateMixin
    ]);
    var dropdownItemDisabled = dropdownItemStyle.concat([
        {
            color: semanticColors.disabledText,
            cursor: 'default'
        }
    ]);
    return {
        root: globalClassnames.root,
        label: globalClassnames.label,
        dropdown: [
            globalClassnames.dropdown,
            normalize,
            tslib_1.__assign({}, theme.fonts.medium, { color: palette.neutralPrimary, position: 'relative', outline: 0, userSelect: 'none', selectors: (_a = {},
                    _a['&:hover .' + globalClassnames.title] = [
                        !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                        { borderColor: palette.neutralDark },
                        highContrastBorderState
                    ],
                    _a['&:focus .' + globalClassnames.title] = [
                        !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                        { borderColor: palette.themePrimary },
                        highContrastItemAndTitleStateMixin
                    ],
                    _a['&:active .' + globalClassnames.title] = [
                        !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                        { borderColor: palette.themeDark },
                        highContrastBorderState
                    ],
                    _a['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                    _a['&:focus .' + globalClassnames.caretDown] = [
                        !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                        { selectors: tslib_1.__assign((_b = {}, _b[HighContrastSelector] = { color: 'HighlightText' }, _b), highContrastAdjustMixin) }
                    ],
                    _a['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                    _a['&:hover .' + globalClassnames.titleIsPlaceHolder] = rootHoverFocusActiveSelectorBodySubtextMixin,
                    _a['&:focus .' + globalClassnames.titleIsPlaceHolder] = rootHoverFocusActiveSelectorBodySubtextMixin,
                    _a['&:active .' + globalClassnames.titleIsPlaceHolder] = rootHoverFocusActiveSelectorBodySubtextMixin,
                    _a['&:hover .' + globalClassnames.titleHasError] = borderColorError,
                    _a['&:active .' + globalClassnames.titleHasError] = borderColorError,
                    _a['&:focus .' + globalClassnames.titleHasError] = borderColorError,
                    _a) }),
            className,
            isOpen && 'is-open',
            disabled && 'is-disabled',
            required && 'is-required'
        ],
        title: [
            globalClassnames.title,
            normalize,
            {
                backgroundColor: semanticColors.inputBackground,
                borderWidth: 1,
                borderStyle: 'solid',
                borderColor: semanticColors.inputBorder,
                cursor: 'pointer',
                display: 'block',
                height: DROPDOWN_HEIGHT,
                lineHeight: DROPDOWN_HEIGHT - 2,
                padding: "0 " + DROPDOWN_HEIGHT + "px 0 12px",
                position: 'relative',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis'
            },
            isRenderingPlaceholder && [globalClassnames.titleIsPlaceHolder, { color: semanticColors.inputPlaceholderText }],
            hasError && [globalClassnames.titleHasError, borderColorError],
            disabled && {
                backgroundColor: semanticColors.disabledBackground,
                border: 'none',
                color: semanticColors.disabledText,
                cursor: 'default',
                selectors: (_c = {}, _c[HighContrastSelector] = { border: '1px solid GrayText', color: 'GrayText' }, _c)
            }
        ],
        caretDownWrapper: [
            globalClassnames.caretDownWrapper,
            {
                position: 'absolute',
                top: 1,
                right: 12,
                height: DROPDOWN_HEIGHT,
                lineHeight: DROPDOWN_HEIGHT - 2 // height minus the border
            }
        ],
        caretDown: [
            globalClassnames.caretDown,
            { color: palette.neutralSecondary, fontSize: FontSizes.small, pointerEvents: 'none' },
            disabled && { color: semanticColors.disabledText, selectors: (_d = {}, _d[HighContrastSelector] = { color: 'GrayText' }, _d) }
        ],
        errorMessage: tslib_1.__assign({ color: semanticColors.errorText }, theme.fonts.small, { paddingTop: 5 }),
        callout: [
            globalClassnames.callout,
            {
                boxShadow: '0 0 2px 0 rgba(0,0,0,0.2)',
                border: "1px solid " + palette.neutralLight
            },
            calloutClassName
        ],
        dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },
        dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],
        dropdownItem: dropdownItemStyle.concat([
            {
                selectors: (_e = {},
                    _e[HighContrastSelector] = {
                        borderColor: 'Window'
                    },
                    _e['&:hover'] = {
                        color: 'inherit'
                    },
                    _e['&:focus'] = {
                        backgroundColor: semanticColors.listItemBackgroundHovered
                    },
                    _e['&:active'] = {
                        backgroundColor: semanticColors.listHeaderBackgroundHovered,
                        color: palette.black
                    },
                    _e)
            }
        ]),
        dropdownItemSelected: dropdownItemSelected,
        dropdownItemDisabled: dropdownItemDisabled,
        dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],
        dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],
        dropdownOptionText: [
            globalClassnames.dropdownOptionText,
            {
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                minWidth: 0,
                maxWidth: '100%',
                wordWrap: 'break-word',
                overflowWrap: 'break-word',
                margin: '1px'
            }
        ],
        dropdownItemHeader: [
            globalClassnames.dropdownItemHeader,
            tslib_1.__assign({}, theme.fonts.medium, { fontWeight: FontWeights.semibold, color: semanticColors.menuHeader, background: 'none', backgroundColor: 'transparent', border: 'none', height: DROPDOWN_ITEM_HEIGHT, lineHeight: DROPDOWN_ITEM_HEIGHT, cursor: 'default', padding: '0px 16px', userSelect: 'none', textAlign: 'left' })
        ],
        subComponentStyles: {
            label: { root: { display: 'inline-block' } },
            panel: {
                root: [panelClassName],
                main: {
                    // Force drop shadow even under medium breakpoint
                    boxShadow: '-30px 0px 30px -30px rgba(0,0,0,0.2)'
                },
                contentInner: { padding: '0 0 20px' }
            }
        }
    };
    var _a, _b, _c, _d, _e;
};
var _a, _b;
//# sourceMappingURL=Dropdown.styles.js.map