import { concatStyleSets, HighContrastSelector, IconFontSizes } from '../../Styling';
import { memoizeFunction } from '../../Utilities';
var ARROW_BUTTON_WIDTH = 23;
var ARROW_BUTTON_ICON_SIZE = 8;
var DEFAULT_HEIGHT = 32;
var DEFAULT_MIN_WIDTH = 86;
var LABEL_MARGIN = 10;
var _getDisabledStyles = memoizeFunction(function (theme) {
    var _a;
    var semanticColors = theme.semanticColors;
    var SpinButtonTextColorDisabled = semanticColors.disabledText;
    var SpinButtonBackgroundColorDisabled = semanticColors.disabledBackground;
    return {
        backgroundColor: SpinButtonBackgroundColorDisabled,
        borderColor: 'transparent',
        pointerEvents: 'none',
        cursor: 'default',
        color: SpinButtonTextColorDisabled,
        selectors: (_a = {},
            _a[HighContrastSelector] = {
                color: 'GrayText'
            },
            _a)
    };
});
export var getArrowButtonStyles = memoizeFunction(function (theme, isUpArrow, customSpecificArrowStyles) {
    var _a, _b, _c;
    var palette = theme.palette, effects = theme.effects;
    // TODO: after updating the semanticColor slots all this need to be reevaluated.
    var ArrowButtonTextColor = palette.neutralSecondary;
    var ArrowButtonTextColorHovered = palette.neutralPrimary;
    var ArrowButtonTextColorPressed = palette.neutralPrimary;
    var ArrowButtonBackgroundHovered = palette.neutralLighter;
    var ArrowButtonBackgroundPressed = palette.neutralLight;
    var defaultArrowButtonStyles = {
        root: {
            outline: 'none',
            display: 'block',
            height: '50%',
            width: ARROW_BUTTON_WIDTH,
            padding: 0,
            backgroundColor: 'transparent',
            textAlign: 'center',
            cursor: 'default',
            color: ArrowButtonTextColor,
            selectors: {
                '&.ms-DownButton': {
                    borderRadius: "0 0 " + effects.roundedCorner2 + " 0"
                },
                '&.ms-UpButton': {
                    borderRadius: "0 " + effects.roundedCorner2 + " 0 0"
                }
            }
        },
        rootHovered: {
            backgroundColor: ArrowButtonBackgroundHovered,
            color: ArrowButtonTextColorHovered
        },
        rootChecked: {
            backgroundColor: ArrowButtonBackgroundPressed,
            color: ArrowButtonTextColorPressed,
            selectors: (_a = {},
                _a[HighContrastSelector] = {
                    backgroundColor: 'Highlight',
                    color: 'HighlightText'
                },
                _a)
        },
        rootPressed: {
            backgroundColor: ArrowButtonBackgroundPressed,
            color: ArrowButtonTextColorPressed,
            selectors: (_b = {},
                _b[HighContrastSelector] = {
                    backgroundColor: 'Highlight',
                    color: 'HighlightText'
                },
                _b)
        },
        rootDisabled: {
            opacity: 0.5,
            selectors: (_c = {},
                _c[HighContrastSelector] = {
                    color: 'GrayText',
                    opacity: 1
                },
                _c)
        },
        icon: {
            fontSize: ARROW_BUTTON_ICON_SIZE,
            marginTop: 0,
            marginRight: 0,
            marginBottom: 0,
            marginLeft: 0
        }
    };
    // No specific styles needed as of now.
    var defaultUpArrowButtonStyles = {};
    var defaultDownArrowButtonStyles = {};
    return concatStyleSets(defaultArrowButtonStyles, isUpArrow ? defaultUpArrowButtonStyles : defaultDownArrowButtonStyles, customSpecificArrowStyles);
});
export var getStyles = memoizeFunction(function (theme, customStyles) {
    var _a, _b, _c;
    var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
    var SpinButtonRootBorderColor = semanticColors.inputBorder;
    var SpinButtonRootBorderColorHovered = semanticColors.inputBorderHovered;
    var SpinButtonRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
    var SpinButtonInputTextColor = semanticColors.bodyText;
    var SpinButtonInputTextColorSelected = palette.white;
    var SpinButtonInputBackgroundColorSelected = palette.themePrimary;
    var SpinButtonIconDisabledColor = semanticColors.disabledText;
    var defaultStyles = {
        root: {
            outline: 'none',
            fontSize: fonts.medium.fontSize,
            width: '100%',
            minWidth: DEFAULT_MIN_WIDTH
        },
        labelWrapper: {
            display: 'inline-flex'
        },
        labelWrapperStart: {
            height: DEFAULT_HEIGHT,
            alignItems: 'center',
            float: 'left',
            marginRight: LABEL_MARGIN
        },
        labelWrapperEnd: {
            height: DEFAULT_HEIGHT,
            alignItems: 'center',
            float: 'right',
            marginLeft: LABEL_MARGIN
        },
        labelWrapperTop: {},
        labelWrapperBottom: {},
        icon: {
            padding: '0 5px',
            fontSize: IconFontSizes.large
        },
        iconDisabled: {
            color: SpinButtonIconDisabledColor
        },
        label: {
            pointerEvents: 'none',
            // centering the label with the icon by forcing the exact same height as the icon.
            lineHeight: IconFontSizes.large
        },
        labelDisabled: {},
        spinButtonWrapper: {
            display: 'flex',
            boxSizing: 'border-box',
            height: DEFAULT_HEIGHT,
            minWidth: DEFAULT_MIN_WIDTH,
            border: "1px solid " + SpinButtonRootBorderColor,
            borderRadius: effects.roundedCorner2
        },
        spinButtonWrapperTopBottom: {
            width: '100%'
        },
        spinButtonWrapperHovered: {
            borderColor: SpinButtonRootBorderColorHovered,
            selectors: (_a = {},
                _a[HighContrastSelector] = {
                    borderColor: 'Highlight'
                },
                _a)
        },
        spinButtonWrapperFocused: {
            borderColor: SpinButtonRootBorderColorFocused,
            selectors: (_b = {},
                _b[HighContrastSelector] = {
                    borderColor: 'Highlight'
                },
                _b)
        },
        spinButtonWrapperDisabled: _getDisabledStyles(theme),
        input: {
            boxSizing: 'border-box',
            boxShadow: 'none',
            borderStyle: 'none',
            flex: 1,
            margin: 0,
            fontSize: fonts.medium.fontSize,
            color: SpinButtonInputTextColor,
            height: '100%',
            padding: '0 8px',
            outline: 0,
            display: 'block',
            minWidth: DEFAULT_MIN_WIDTH - ARROW_BUTTON_WIDTH - 2,
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            cursor: 'text',
            userSelect: 'text',
            borderRadius: effects.roundedCorner2 + " 0 0 " + effects.roundedCorner2
        },
        inputTextSelected: {
            backgroundColor: SpinButtonInputBackgroundColorSelected,
            color: SpinButtonInputTextColorSelected,
            selectors: (_c = {},
                _c[HighContrastSelector] = {
                    backgroundColor: 'Highlight',
                    borderColor: 'Highlight',
                    color: 'HighlightText'
                },
                _c)
        },
        inputDisabled: _getDisabledStyles(theme),
        arrowButtonsContainer: {
            display: 'block',
            height: '100%',
            cursor: 'default'
        },
        arrowButtonsContainerDisabled: _getDisabledStyles(theme)
    };
    return concatStyleSets(defaultStyles, customStyles);
});
//# sourceMappingURL=SpinButton.styles.js.map