define(["require", "exports", "tslib", "../../../Styling", "../../../Utilities"], function (require, exports, tslib_1, Styling_1, Utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var GlobalClassNames = {
        root: 'ms-ChoiceField',
        choiceFieldWrapper: 'ms-ChoiceField-wrapper',
        input: 'ms-ChoiceField-input',
        field: 'ms-ChoiceField-field',
        innerField: 'ms-ChoiceField-innerField',
        imageWrapper: 'ms-ChoiceField-imageWrapper',
        iconWrapper: 'ms-ChoiceField-iconWrapper',
        labelWrapper: 'ms-ChoiceField-labelWrapper',
        checked: 'is-checked',
    };
    var labelWrapperLineHeight = 15;
    var labelWrapperHeight = labelWrapperLineHeight * 2 + 2; // adding 2px height to ensure text doesn't get cutoff
    var iconSize = 32;
    var choiceFieldSize = 20;
    var choiceFieldTransitionDuration = '200ms';
    var choiceFieldTransitionTiming = 'cubic-bezier(.4, 0, .23, 1)';
    var radioButtonSpacing = 3;
    var radioButtonInnerSize = 5;
    function getChoiceGroupFocusStyle(focusBorderColor, hasIconOrImage) {
        var _a, _b;
        return [
            'is-inFocus',
            {
                selectors: (_a = {},
                    _a["." + Utilities_1.IsFocusVisibleClassName + " &"] = {
                        position: 'relative',
                        outline: 'transparent',
                        selectors: {
                            '::-moz-focus-inner': {
                                border: 0,
                            },
                            ':after': {
                                content: '""',
                                top: -2,
                                right: -2,
                                bottom: -2,
                                left: -2,
                                pointerEvents: 'none',
                                border: "1px solid " + focusBorderColor,
                                position: 'absolute',
                                selectors: (_b = {},
                                    _b[Styling_1.HighContrastSelector] = {
                                        borderColor: 'WindowText',
                                        borderWidth: hasIconOrImage ? 1 : 2,
                                    },
                                    _b),
                            },
                        },
                    },
                    _a),
            },
        ];
    }
    function getImageWrapperStyle(isSelectedImageWrapper, className, checked) {
        return [
            className,
            {
                paddingBottom: 2,
                transitionProperty: 'opacity',
                transitionDuration: choiceFieldTransitionDuration,
                transitionTimingFunction: 'ease',
                selectors: {
                    '.ms-Image': {
                        display: 'inline-block',
                        borderStyle: 'none',
                    },
                },
            },
            (checked ? !isSelectedImageWrapper : isSelectedImageWrapper) && [
                'is-hidden',
                {
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    width: '100%',
                    height: '100%',
                    overflow: 'hidden',
                    opacity: 0,
                },
            ],
        ];
    }
    exports.getStyles = function (props) {
        var _a, _b, _c, _d, _e;
        var theme = props.theme, hasIcon = props.hasIcon, hasImage = props.hasImage, checked = props.checked, disabled = props.disabled, imageIsLarge = props.imageIsLarge, focused = props.focused, imageSize = props.imageSize;
        var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;
        var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
        // Tokens
        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder
        var circleBorderColor = palette.neutralPrimary;
        var circleHoveredBorderColor = semanticColors.inputBorderHovered;
        var circleCheckedBorderColor = semanticColors.inputBackgroundChecked;
        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
        var circleCheckedHoveredBorderColor = palette.themeDark;
        var circleDisabledBorderColor = semanticColors.disabledBodySubtext;
        var circleBackgroundColor = semanticColors.bodyBackground;
        var dotUncheckedHoveredColor = palette.neutralSecondary;
        var dotCheckedColor = semanticColors.inputBackgroundChecked;
        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
        var dotCheckedHoveredColor = palette.themeDark;
        var dotDisabledColor = semanticColors.disabledBodySubtext;
        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.bodyTextChecked
        var labelHoverFocusColor = palette.neutralDark;
        var focusBorderColor = semanticColors.focusBorder;
        var iconOrImageChoiceBorderUncheckedHoveredColor = semanticColors.inputBorderHovered;
        // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered
        var iconOrImageChoiceBorderCheckedColor = semanticColors.inputBackgroundChecked;
        var iconOrImageChoiceBorderCheckedHoveredColor = palette.themeDark;
        var iconOrImageChoiceBackgroundColor = palette.neutralLighter;
        var fieldHoverOrFocusProperties = {
            selectors: {
                '.ms-ChoiceFieldLabel': {
                    color: labelHoverFocusColor,
                },
                ':before': {
                    borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,
                },
                ':after': [
                    !hasIcon &&
                        !hasImage &&
                        !checked && {
                        content: '""',
                        transitionProperty: 'background-color',
                        left: 5,
                        top: 5,
                        width: 10,
                        height: 10,
                        backgroundColor: dotUncheckedHoveredColor,
                    },
                    checked && {
                        borderColor: dotCheckedHoveredColor,
                    },
                ],
            },
        };
        var enabledFieldWithImageHoverOrFocusProperties = {
            borderColor: checked ? iconOrImageChoiceBorderCheckedHoveredColor : iconOrImageChoiceBorderUncheckedHoveredColor,
            selectors: {
                ':before': {
                    opacity: 1,
                    borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,
                },
            },
        };
        var circleAreaProperties = [
            {
                content: '""',
                display: 'inline-block',
                backgroundColor: circleBackgroundColor,
                borderWidth: 1,
                borderStyle: 'solid',
                borderColor: circleBorderColor,
                width: choiceFieldSize,
                height: choiceFieldSize,
                fontWeight: 'normal',
                position: 'absolute',
                top: 0,
                left: 0,
                boxSizing: 'border-box',
                transitionProperty: 'border-color',
                transitionDuration: choiceFieldTransitionDuration,
                transitionTimingFunction: choiceFieldTransitionTiming,
                borderRadius: '50%',
            },
            disabled && {
                borderColor: circleDisabledBorderColor,
                selectors: (_a = {},
                    _a[Styling_1.HighContrastSelector] = tslib_1.__assign({ borderColor: 'GrayText', background: 'Window' }, Styling_1.getHighContrastNoAdjustStyle()),
                    _a),
            },
            checked && {
                borderColor: disabled ? circleDisabledBorderColor : circleCheckedBorderColor,
                selectors: (_b = {},
                    _b[Styling_1.HighContrastSelector] = {
                        borderColor: 'Highlight',
                        background: 'Window',
                        forcedColorAdjust: 'none',
                    },
                    _b),
            },
            (hasIcon || hasImage) && {
                top: radioButtonSpacing,
                right: radioButtonSpacing,
                left: 'auto',
                opacity: checked ? 1 : 0,
            },
        ];
        var dotAreaProperties = [
            {
                content: '""',
                width: 0,
                height: 0,
                borderRadius: '50%',
                position: 'absolute',
                left: choiceFieldSize / 2,
                right: 0,
                transitionProperty: 'border-width',
                transitionDuration: choiceFieldTransitionDuration,
                transitionTimingFunction: choiceFieldTransitionTiming,
                boxSizing: 'border-box',
            },
            checked && {
                borderWidth: 5,
                borderStyle: 'solid',
                borderColor: disabled ? dotDisabledColor : dotCheckedColor,
                left: 5,
                top: 5,
                width: 10,
                height: 10,
                selectors: (_c = {},
                    _c[Styling_1.HighContrastSelector] = {
                        borderColor: 'Highlight',
                        forcedColorAdjust: 'none',
                    },
                    _c),
            },
            checked &&
                (hasIcon || hasImage) && {
                top: radioButtonSpacing + radioButtonInnerSize,
                right: radioButtonSpacing + radioButtonInnerSize,
                left: 'auto',
            },
        ];
        return {
            root: [
                classNames.root,
                theme.fonts.medium,
                {
                    display: 'flex',
                    alignItems: 'center',
                    boxSizing: 'border-box',
                    color: semanticColors.bodyText,
                    minHeight: 26,
                    border: 'none',
                    position: 'relative',
                    marginTop: 8,
                    selectors: {
                        '.ms-ChoiceFieldLabel': {
                            display: 'inline-block',
                        },
                    },
                },
                !hasIcon &&
                    !hasImage && {
                    selectors: {
                        '.ms-ChoiceFieldLabel': {
                            paddingLeft: '26px',
                        },
                    },
                },
                hasImage && 'ms-ChoiceField--image',
                hasIcon && 'ms-ChoiceField--icon',
                (hasIcon || hasImage) && {
                    display: 'inline-flex',
                    fontSize: 0,
                    margin: '0 4px 4px 0',
                    paddingLeft: 0,
                    backgroundColor: iconOrImageChoiceBackgroundColor,
                    height: '100%',
                },
            ],
            choiceFieldWrapper: [
                classNames.choiceFieldWrapper,
                focused && getChoiceGroupFocusStyle(focusBorderColor, hasIcon || hasImage),
            ],
            // The hidden input
            input: [
                classNames.input,
                {
                    position: 'absolute',
                    opacity: 0,
                    top: 0,
                    right: 0,
                    width: '100%',
                    height: '100%',
                    margin: 0,
                },
                disabled && 'is-disabled',
            ],
            field: [
                classNames.field,
                checked && classNames.checked,
                {
                    display: 'inline-block',
                    cursor: 'pointer',
                    marginTop: 0,
                    position: 'relative',
                    verticalAlign: 'top',
                    userSelect: 'none',
                    minHeight: 20,
                    selectors: {
                        ':hover': !disabled && fieldHoverOrFocusProperties,
                        ':focus': !disabled && fieldHoverOrFocusProperties,
                        // The circle
                        ':before': circleAreaProperties,
                        // The dot
                        ':after': dotAreaProperties,
                    },
                },
                hasIcon && 'ms-ChoiceField--icon',
                hasImage && 'ms-ChoiceField-field--image',
                (hasIcon || hasImage) && {
                    boxSizing: 'content-box',
                    cursor: 'pointer',
                    paddingTop: 22,
                    margin: 0,
                    textAlign: 'center',
                    transitionProperty: 'all',
                    transitionDuration: choiceFieldTransitionDuration,
                    transitionTimingFunction: 'ease',
                    border: '1px solid transparent',
                    justifyContent: 'center',
                    alignItems: 'center',
                    display: 'flex',
                    flexDirection: 'column',
                },
                checked && {
                    borderColor: iconOrImageChoiceBorderCheckedColor,
                },
                (hasIcon || hasImage) &&
                    !disabled && {
                    selectors: {
                        ':hover': enabledFieldWithImageHoverOrFocusProperties,
                        ':focus': enabledFieldWithImageHoverOrFocusProperties,
                    },
                },
                disabled && {
                    cursor: 'default',
                    selectors: {
                        '.ms-ChoiceFieldLabel': {
                            color: semanticColors.disabledBodyText,
                            selectors: (_d = {},
                                _d[Styling_1.HighContrastSelector] = tslib_1.__assign({ color: 'GrayText' }, Styling_1.getHighContrastNoAdjustStyle()),
                                _d),
                        },
                    },
                },
                checked &&
                    disabled && {
                    borderColor: iconOrImageChoiceBackgroundColor,
                },
            ],
            innerField: [
                classNames.innerField,
                hasImage && {
                    // using non-null assertion because we have a default in `ChoiceGroupOptionBase` class.
                    height: imageSize.height,
                    width: imageSize.width,
                },
                (hasIcon || hasImage) && {
                    position: 'relative',
                    display: 'inline-block',
                    paddingLeft: 30,
                    paddingRight: 30,
                },
                (hasIcon || hasImage) &&
                    imageIsLarge && {
                    paddingLeft: 24,
                    paddingRight: 24,
                },
                (hasIcon || hasImage) &&
                    disabled && {
                    opacity: 0.25,
                    selectors: (_e = {},
                        _e[Styling_1.HighContrastSelector] = {
                            color: 'GrayText',
                            opacity: 1,
                        },
                        _e),
                },
            ],
            imageWrapper: getImageWrapperStyle(false, classNames.imageWrapper, checked),
            selectedImageWrapper: getImageWrapperStyle(true, classNames.imageWrapper, checked),
            iconWrapper: [
                classNames.iconWrapper,
                {
                    fontSize: iconSize,
                    lineHeight: iconSize,
                    height: iconSize,
                },
            ],
            labelWrapper: [
                classNames.labelWrapper,
                fonts.medium,
                (hasIcon || hasImage) && {
                    display: 'block',
                    position: 'relative',
                    margin: '4px 8px 2px 8px',
                    height: labelWrapperHeight,
                    lineHeight: labelWrapperLineHeight,
                    // using non-null assertion because we have a default in `ChoiceGroupOptionBase` class.
                    maxWidth: imageSize.width * 2,
                    overflow: 'hidden',
                    whiteSpace: 'pre-wrap',
                },
            ],
        };
    };
});
//# sourceMappingURL=ChoiceGroupOption.styles.js.map