import { getGlobalClassNames, HighContrastSelector, AnimationVariables, getFocusStyle } from '../../Styling';
import { getRTL } from '@uifabric/utilities';
var GlobalClassNames = {
    root: 'ms-Slider',
    enabled: 'ms-Slider-enabled',
    disabled: 'ms-Slider-disabled',
    row: 'ms-Slider-row',
    column: 'ms-Slider-column',
    container: 'ms-Slider-container',
    slideBox: 'ms-Slider-slideBox',
    line: 'ms-Slider-line',
    thumb: 'ms-Slider-thumb',
    activeSection: 'ms-Slider-active',
    inactiveSection: 'ms-Slider-inactive',
    valueLabel: 'ms-Slider-value',
    showValue: 'ms-Slider-showValue',
    showTransitions: 'ms-Slider-showTransitions'
};
export var getStyles = function (props) {
    var className = props.className, titleLabelClassName = props.titleLabelClassName, theme = props.theme;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    var slideBoxActiveSectionStyles = !props.disabled && {
        backgroundColor: theme.palette.themePrimary,
        selectors: (_a = {},
            _a[HighContrastSelector] = {
                backgroundColor: 'Highlight'
            },
            _a)
    };
    var slideBoxInactiveSectionStyles = !props.disabled && {
        backgroundColor: theme.palette.themeLight,
        selectors: (_b = {},
            _b[HighContrastSelector] = {
                borderColor: 'Highlight'
            },
            _b)
    };
    var slideBoxActiveThumbStyles = !props.disabled && {
        border: "2px solid " + theme.palette.themePrimary,
        selectors: (_c = {},
            _c[HighContrastSelector] = {
                borderColor: 'Highlight'
            },
            _c)
    };
    return {
        root: [
            classNames.root,
            theme.fonts.medium,
            {
                userSelect: 'none'
            },
            props.vertical && {
                marginRight: 8
            }
        ].concat([!props.disabled ? classNames.enabled : undefined], [props.disabled ? classNames.disabled : undefined], [!props.vertical ? classNames.row : undefined], [props.vertical ? classNames.column : undefined], [
            className
        ]),
        titleLabel: [
            {
                padding: 0
            },
            titleLabelClassName
        ],
        container: [
            classNames.container,
            {
                display: 'flex',
                flexWrap: 'nowrap',
                alignItems: 'center'
            },
            props.vertical && {
                flexDirection: 'column',
                height: '100%',
                textAlign: 'center',
                margin: '8px 0'
            }
        ],
        slideBox: [
            classNames.slideBox,
            getFocusStyle(theme),
            {
                background: 'transparent',
                border: 'none',
                flexGrow: 1,
                lineHeight: 28,
                selectors: {
                    ':active $activeSection': slideBoxActiveSectionStyles,
                    ':hover $activeSection': slideBoxActiveSectionStyles,
                    ':active $inactiveSection': slideBoxInactiveSectionStyles,
                    ':hover $inactiveSection': slideBoxInactiveSectionStyles,
                    ':active $thumb': slideBoxActiveThumbStyles,
                    ':hover $thumb': slideBoxActiveThumbStyles,
                    $thumb: [
                        {
                            borderWidth: 2,
                            borderStyle: 'solid',
                            borderColor: theme.palette.neutralSecondary,
                            borderRadius: 10,
                            boxSizing: 'border-box',
                            background: theme.palette.white,
                            display: 'block',
                            width: 16,
                            height: 16,
                            position: 'absolute'
                        },
                        props.vertical
                            ? {
                                left: -6,
                                margin: '0 auto',
                                transform: 'translateY(8px)'
                            }
                            : {
                                top: -6,
                                transform: getRTL() ? 'translateX(50%)' : 'translateX(-50%)'
                            },
                        props.showTransitions && {
                            transition: "left " + AnimationVariables.durationValue3 + " " + AnimationVariables.easeFunction1
                        },
                        props.disabled && {
                            borderColor: theme.palette.neutralTertiaryAlt,
                            selectors: (_d = {},
                                _d[HighContrastSelector] = {
                                    borderColor: 'GrayText'
                                },
                                _d)
                        }
                    ]
                }
            },
            props.vertical
                ? {
                    height: '100%',
                    width: 28,
                    padding: '8px 0' // Make room for thumb at bottom of line
                }
                : {
                    height: 28,
                    width: 'auto',
                    padding: '0 8px' // Make room for thumb at ends of line
                }
        ].concat([props.showValue ? classNames.showValue : undefined], [props.showTransitions ? classNames.showTransitions : undefined]),
        thumb: [classNames.thumb],
        line: [
            classNames.line,
            {
                display: 'flex',
                position: 'relative',
                selectors: {
                    $lineContainer: [
                        {
                            borderRadius: 4,
                            boxSizing: 'border-box'
                        },
                        props.vertical
                            ? {
                                width: 4,
                                height: '100%'
                            }
                            : {
                                height: 4,
                                width: '100%'
                            }
                    ]
                }
            },
            props.vertical
                ? {
                    height: '100%',
                    width: 4,
                    margin: '0 auto',
                    flexDirection: 'column-reverse'
                }
                : {
                    width: '100%'
                }
        ],
        lineContainer: [{}],
        activeSection: [
            classNames.activeSection,
            {
                background: theme.palette.neutralSecondary,
                selectors: (_e = {},
                    _e[HighContrastSelector] = {
                        backgroundColor: 'WindowText'
                    },
                    _e)
            },
            props.showTransitions && {
                transition: "width " + AnimationVariables.durationValue3 + " " + AnimationVariables.easeFunction1
            },
            props.disabled && {
                background: theme.palette.neutralTertiaryAlt,
                selectors: (_f = {},
                    _f[HighContrastSelector] = {
                        backgroundColor: 'GrayText',
                        borderColor: 'GrayText'
                    },
                    _f)
            }
        ],
        inactiveSection: [
            classNames.inactiveSection,
            {
                background: theme.palette.neutralTertiaryAlt,
                selectors: (_g = {},
                    _g[HighContrastSelector] = {
                        border: '1px solid WindowText'
                    },
                    _g)
            },
            props.showTransitions && {
                transition: "width " + AnimationVariables.durationValue3 + " " + AnimationVariables.easeFunction1
            },
            props.disabled && {
                background: theme.palette.neutralLight,
                selectors: (_h = {},
                    _h[HighContrastSelector] = {
                        backgroundColor: 'GrayText',
                        borderColor: 'GrayText'
                    },
                    _h)
            }
        ],
        valueLabel: [
            classNames.valueLabel,
            {
                flexShrink: 1,
                width: 30,
                lineHeight: '1' // using a string here meaning it's relative to the size of the font
            },
            props.vertical
                ? {
                    margin: '0 auto',
                    whiteSpace: 'nowrap',
                    width: 40
                }
                : {
                    margin: '0 8px',
                    whiteSpace: 'nowrap',
                    width: 40
                }
        ]
    };
    var _a, _b, _c, _d, _e, _f, _g, _h;
};
//# sourceMappingURL=Slider.styles.js.map