"use strict";
var _a, _b, _c;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Utilities_1 = require("../../Utilities");
var positioning_1 = require("../../utilities/positioning");
var Styling_1 = require("../../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 = 36;
var highContrastAdjustMixin = (_a = {},
    _a[Styling_1.HighContrastSelector + ", " + Styling_1.HighContrastSelectorWhite.replace('@media ', '')] = {
        MsHighContrastAdjust: 'none'
    },
    _a);
var highContrastItemAndTitleStateMixin = {
    selectors: tslib_1.__assign((_b = {}, _b[Styling_1.HighContrastSelector] = {
        backgroundColor: 'Highlight',
        borderColor: 'Highlight',
        color: 'HighlightText',
        selectors: {
            ':hover': {
                color: 'HighlightText' // overrides the hover styling for buttons that are also selected
            }
        }
    }, _b), highContrastAdjustMixin)
};
var highContrastBorderState = {
    selectors: (_c = {},
        _c[Styling_1.HighContrastSelector] = {
            borderColor: 'Highlight'
        },
        _c)
};
var MinimumScreenSelector = Styling_1.getScreenSelector(0, Styling_1.ScreenWidthMinMedium);
exports.getStyles = function (props) {
    var _a, _b, _c, _d, _e, _f, _g;
    var theme = props.theme, hasError = props.hasError, hasLabel = props.hasLabel, className = props.className, isOpen = props.isOpen, disabled = props.disabled, required = props.required, isRenderingPlaceholder = props.isRenderingPlaceholder, panelClassName = props.panelClassName, calloutClassName = props.calloutClassName, calloutRenderEdge = props.calloutRenderEdge;
    if (!theme) {
        throw new Error('theme is undefined or null in base Dropdown getStyles function.');
    }
    var globalClassnames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
    var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
    var rootHoverFocusActiveSelectorNeutralDarkMixin = {
        color: semanticColors.menuItemTextHovered
    };
    var rootHoverFocusActiveSelectorNeutralPrimaryMixin = {
        color: palette.neutralPrimary
    };
    var borderColorError = {
        borderColor: semanticColors.errorText
    };
    var dropdownItemStyle = [
        globalClassnames.dropdownItem,
        {
            backgroundColor: 'transparent',
            boxSizing: 'border-box',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            padding: '0 8px',
            width: '100%',
            minHeight: DROPDOWN_ITEM_HEIGHT,
            lineHeight: 20,
            height: 0,
            position: 'relative',
            border: '1px solid transparent',
            borderRadius: 0,
            wordWrap: 'break-word',
            overflowWrap: 'break-word',
            textAlign: 'left'
        }
    ];
    var itemSelectors = function (isSelected) {
        var _a;
        if (isSelected === void 0) { isSelected = false; }
        return {
            selectors: (_a = {
                    '&:hover:focus': {
                        color: palette.neutralDark,
                        backgroundColor: !isSelected ? palette.neutralLighter : palette.neutralLight
                    },
                    '&:focus': {
                        backgroundColor: !isSelected ? 'transparent' : palette.neutralLight
                    },
                    '&:active': {
                        color: palette.neutralDark,
                        backgroundColor: !isSelected ? palette.neutralLighter : palette.neutralLight
                    }
                },
                _a[Styling_1.HighContrastSelector] = {
                    borderColor: 'Window'
                },
                _a["." + Utilities_1.IsFocusVisibleClassName + " &:focus:after"] = {
                    left: 0,
                    top: 0,
                    bottom: 0,
                    right: 0
                },
                _a)
        };
    };
    var dropdownItemSelected = dropdownItemStyle.concat([
        {
            backgroundColor: palette.neutralLight,
            color: palette.neutralDark
        },
        itemSelectors(true),
        highContrastItemAndTitleStateMixin
    ]);
    var dropdownItemDisabled = dropdownItemStyle.concat([
        {
            color: semanticColors.disabledText,
            cursor: 'default'
        }
    ]);
    var titleOpenBorderRadius = calloutRenderEdge === positioning_1.RectangleEdge.bottom
        ? effects.roundedCorner2 + " " + effects.roundedCorner2 + " 0 0"
        : "0 0 " + effects.roundedCorner2 + " " + effects.roundedCorner2;
    var calloutOpenBorderRadius = calloutRenderEdge === positioning_1.RectangleEdge.bottom
        ? "0 0 " + effects.roundedCorner2 + " " + effects.roundedCorner2
        : effects.roundedCorner2 + " " + effects.roundedCorner2 + " 0 0";
    return {
        root: [globalClassnames.root, className],
        label: globalClassnames.label,
        dropdown: [
            globalClassnames.dropdown,
            Styling_1.normalize,
            fonts.medium,
            {
                color: palette.neutralPrimary,
                borderColor: palette.neutralSecondary,
                position: 'relative',
                outline: 0,
                userSelect: 'none',
                selectors: (_a = {},
                    _a['&:hover .' + globalClassnames.title] = [
                        !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                        { borderColor: !isOpen ? palette.neutralPrimary : palette.themePrimary },
                        highContrastBorderState
                    ],
                    _a['&:focus .' + globalClassnames.title] = [
                        !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                        {
                            borderColor: palette.themePrimary /* see https://github.com/OfficeDev/office-ui-fabric-react/pull/9182 for semantic color disc */
                        },
                        highContrastItemAndTitleStateMixin
                    ],
                    _a['&:active .' + globalClassnames.title] = [
                        !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                        { borderColor: palette.themePrimary },
                        highContrastBorderState
                    ],
                    _a['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                    _a['&:focus .' + globalClassnames.caretDown] = [
                        !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                        { selectors: tslib_1.__assign((_b = {}, _b[Styling_1.HighContrastSelector] = { color: 'HighlightText' }, _b), highContrastAdjustMixin) }
                    ],
                    _a['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                    _a['&:hover .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                    _a['&:focus .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                    _a['&:active .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                    _a['&:hover .' + globalClassnames.titleHasError] = borderColorError,
                    _a['&:active .' + globalClassnames.titleHasError] = borderColorError,
                    _a)
            },
            isOpen && 'is-open',
            disabled && 'is-disabled',
            required && 'is-required',
            required &&
                !hasLabel && {
                selectors: (_c = {
                        ':after': {
                            content: "'*'",
                            color: semanticColors.errorText,
                            position: 'absolute',
                            top: -5,
                            right: -10
                        }
                    },
                    _c[Styling_1.HighContrastSelector] = {
                        selectors: {
                            ':after': {
                                right: -14 // moving the * 4 pixel to right to alleviate border clipping in HC mode.
                            }
                        }
                    },
                    _c)
            }
        ],
        title: [
            globalClassnames.title,
            Styling_1.normalize,
            {
                backgroundColor: semanticColors.inputBackground,
                borderWidth: 1,
                borderStyle: 'solid',
                borderColor: semanticColors.inputBorder,
                borderRadius: isOpen ? titleOpenBorderRadius : effects.roundedCorner2,
                cursor: 'pointer',
                display: 'block',
                height: DROPDOWN_HEIGHT,
                lineHeight: DROPDOWN_HEIGHT - 2,
                padding: "0 28px 0 8px",
                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: (_d = {}, _d[Styling_1.HighContrastSelector] = { border: '1px solid GrayText', color: 'GrayText' }, _d)
            }
        ],
        caretDownWrapper: [
            globalClassnames.caretDownWrapper,
            {
                position: 'absolute',
                top: 1,
                right: 8,
                height: DROPDOWN_HEIGHT,
                lineHeight: DROPDOWN_HEIGHT - 2 // height minus the border
            },
            !disabled && {
                cursor: 'pointer'
            }
        ],
        caretDown: [
            globalClassnames.caretDown,
            { color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },
            disabled && { color: semanticColors.disabledText, selectors: (_e = {}, _e[Styling_1.HighContrastSelector] = { color: 'GrayText' }, _e) }
        ],
        errorMessage: tslib_1.__assign({ color: semanticColors.errorText }, theme.fonts.small, { paddingTop: 5 }),
        callout: [
            globalClassnames.callout,
            {
                boxShadow: effects.elevation8,
                borderRadius: calloutOpenBorderRadius,
                selectors: (_f = {},
                    _f['.ms-Callout-main'] = { borderRadius: calloutOpenBorderRadius },
                    _f)
            },
            calloutClassName
        ],
        dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },
        dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],
        dropdownItem: dropdownItemStyle.concat([itemSelectors()]),
        dropdownItemSelected: dropdownItemSelected,
        dropdownItemDisabled: dropdownItemDisabled,
        dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],
        dropdownItemHidden: dropdownItemStyle.concat([{ display: 'none' }]),
        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({}, fonts.medium, { fontWeight: Styling_1.FontWeights.semibold, color: semanticColors.menuHeader, background: 'none', backgroundColor: 'transparent', border: 'none', height: DROPDOWN_ITEM_HEIGHT, lineHeight: DROPDOWN_ITEM_HEIGHT, cursor: 'default', padding: '0 8px', userSelect: 'none', textAlign: 'left' })
        ],
        subComponentStyles: {
            label: { root: { display: 'inline-block' } },
            multiSelectItem: {
                root: {
                    padding: 0
                },
                label: {
                    alignSelf: 'stretch',
                    padding: '0 8px',
                    width: '100%'
                }
            },
            panel: {
                root: [panelClassName],
                main: {
                    selectors: (_g = {},
                        // In case of extra small screen sizes
                        _g[MinimumScreenSelector] = {
                            // panelWidth xs
                            width: 272
                        },
                        _g)
                },
                contentInner: { padding: '0 0 20px' }
            }
        }
    };
};
//# sourceMappingURL=Dropdown.styles.js.map