"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var globalClassNames = {
    root: 'ms-TeachingBubble',
    body: 'ms-TeachingBubble-body',
    bodyContent: 'ms-TeachingBubble-bodycontent',
    closeButton: 'ms-TeachingBubble-closebutton',
    content: 'ms-TeachingBubble-content',
    footer: 'ms-TeachingBubble-footer',
    header: 'ms-TeachingBubble-header',
    headerIsCondensed: 'ms-TeachingBubble-header--condensed',
    headerIsSmall: 'ms-TeachingBubble-header--small',
    headerIsLarge: 'ms-TeachingBubble-header--large',
    headline: 'ms-TeachingBubble-headline',
    image: 'ms-TeachingBubble-image',
    primaryButton: 'ms-TeachingBubble-primaryButton',
    secondaryButton: 'ms-TeachingBubble-secondaryButton',
    subText: 'ms-TeachingBubble-subText',
    // TODO: Button global class name usage should be converted to a styles function once
    //        Button supports JS styling, which means these button names can be removed.
    button: 'ms-Button',
    buttonLabel: 'ms-Button-label'
};
var bounceAnimation = Styling_1.keyframes({
    '0%': { transform: 'matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '1.7%': { transform: 'matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '2.35%': { transform: 'matrix3d(0.725, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '3.4%': { transform: 'matrix3d(0.83, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '4.7%': { transform: 'matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '5.11%': { transform: 'matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '6.81%': { transform: 'matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '7.06%': { transform: 'matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '8.76%': { transform: 'matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '9.36%': { transform: 'matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '10.66%': { transform: 'matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '12.16%': { transform: 'matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '12.61%': { transform: 'matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '14.51%': { transform: 'matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '14.96%': { transform: 'matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '17.77%': { transform: 'matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '18.37%': { transform: 'matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '20.52%': { transform: 'matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '22.22%': { transform: 'matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '26.08%': { transform: 'matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '29.93%': { transform: 'matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '31.63%': { transform: 'matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '37.64%': { transform: 'matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '42.74%': { transform: 'matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '45.35%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '49.9%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '50%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '52.15%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '54.3%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '56.46%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '58.61%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '64.16%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '69.72%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '80.83%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '91.99%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' },
    '100%': { transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' }
});
var opacityFadeIn = Styling_1.keyframes({
    '0%': {
        opacity: 0,
        animationTimingFunction: Styling_1.AnimationVariables.easeFunction2
    },
    '26.26%': { opacity: 1 },
    '100%': { opacity: 1 }
});
var rootStyle = function (isWide) {
    return [
        {
            display: 'block',
            maxWidth: 364,
            border: 0,
            boxShadow: 'none !important',
            width: 'calc(100% + 1px)',
            animationName: bounceAnimation + ", " + opacityFadeIn,
            animationDuration: '2000ms',
            animationTimingFunction: 'linear',
            animationFillMode: 'both'
        },
        isWide && {
            maxWidth: '456px'
        }
    ];
};
// TODO: merge this into styles prop once mergeStyles is updated to allow functions/style objects,
//        which will also allow consumers to provide their own callout styles.
// This function takes in TeachingBubble props and returns a Callout styles object
exports.calloutStyles = function (props) {
    var isWide = props.isWide, theme = props.theme;
    var palette = theme.palette;
    return {
        root: rootStyle(isWide).slice(),
        beak: [
            {
                background: palette.themePrimary
            }
        ],
        calloutMain: [
            {
                background: palette.themePrimary
            }
        ]
    };
};
var headerStyle = function (classNames, hasCondensedHeadline, hasSmallHeadline) {
    if (hasCondensedHeadline) {
        return [classNames.headerIsCondensed];
    }
    if (hasSmallHeadline) {
        return [
            classNames.headerIsSmall,
            {
                selectors: {
                    ':not(:last-child)': {
                        marginBottom: '14px'
                    }
                }
            }
        ];
    }
    // Large headline is default
    return [
        classNames.headerIsLarge,
        {
            selectors: {
                ':not(:last-child)': {
                    marginBottom: '14px'
                }
            }
        }
    ];
};
exports.getStyles = function (props) {
    var calloutClassName = props.calloutClassName, hasCondensedHeadline = props.hasCondensedHeadline, hasSmallHeadline = props.hasSmallHeadline, isWide = props.isWide, primaryButtonClassName = props.primaryButtonClassName, secondaryButtonClassName = props.secondaryButtonClassName, theme = props.theme;
    var hasLargeHeadline = !hasCondensedHeadline && !hasSmallHeadline;
    var palette = theme.palette;
    var classNames = Styling_1.getGlobalClassNames(globalClassNames, theme);
    return {
        root: [classNames.root, calloutClassName],
        body: [
            classNames.body,
            {
                selectors: {
                    ':not(:last-child)': {
                        marginBottom: '20px'
                    }
                }
            }
        ],
        bodyContent: [
            classNames.bodyContent,
            {
                padding: '20px'
            },
            isWide && {
                maxWidth: '302px'
            }
        ],
        closeButton: [
            classNames.closeButton,
            {
                position: 'absolute',
                right: 0,
                top: 0,
                color: palette.white,
                fontSize: Styling_1.FontSizes.small,
                selectors: {
                    ':hover': {
                        background: 'transparent'
                    }
                }
            }
        ],
        content: [
            classNames.content
        ].concat(rootStyle(isWide), [
            isWide && {
                display: 'flex'
            }
        ]),
        footer: [
            classNames.footer,
            {
                display: 'flex',
                selectors: (_a = {},
                    // TODO: global class name usage should be converted to a button styles function once Button supports JS styling
                    _a["." + classNames.button + ":not(:first-child)"] = {
                        marginLeft: '20px'
                    },
                    _a)
            }
        ],
        header: [
            classNames.header
        ].concat(headerStyle(classNames, hasCondensedHeadline, hasSmallHeadline), [
            (hasCondensedHeadline || hasSmallHeadline) && [
                Styling_1.DefaultFontStyles.medium,
                {
                    marginRight: '10px',
                    fontWeight: Styling_1.FontWeights.semibold
                }
            ]
        ]),
        headline: [
            classNames.headline,
            {
                margin: 0,
                color: palette.white
            },
            hasLargeHeadline && [
                Styling_1.DefaultFontStyles.xxLarge,
                {
                    fontWeight: Styling_1.FontWeights.light
                }
            ]
        ],
        imageContent: [
            classNames.header,
            classNames.image,
            isWide && {
                display: 'flex',
                alignItems: 'center',
                paddingLeft: '20px',
                maxWidth: '154px'
            }
        ],
        primaryButton: [
            classNames.primaryButton,
            primaryButtonClassName,
            {
                backgroundColor: palette.white,
                borderColor: palette.white,
                whiteSpace: 'nowrap',
                selectors: (_b = {},
                    // TODO: global class name usage should be converted to a button styles function once Button supports JS styling
                    _b["." + classNames.buttonLabel] = [
                        Styling_1.DefaultFontStyles.medium,
                        {
                            color: palette.themePrimary
                        }
                    ],
                    _b[':hover'] = {
                        backgroundColor: palette.themeLighter,
                        borderColor: palette.themeLighter
                    },
                    _b[':focus'] = {
                        backgroundColor: palette.themeLighter,
                        borderColor: palette.white
                    },
                    _b[':active'] = {
                        backgroundColor: palette.white,
                        borderColor: palette.white
                    },
                    _b)
            }
        ],
        secondaryButton: [
            classNames.secondaryButton,
            secondaryButtonClassName,
            {
                backgroundColor: palette.themePrimary,
                borderColor: palette.white,
                whiteSpace: 'nowrap',
                selectors: (_c = {},
                    // TODO: global class name usage should be converted to a button styles function once Button supports JS styling
                    _c["." + classNames.buttonLabel] = [
                        Styling_1.DefaultFontStyles.medium,
                        {
                            color: palette.white
                        }
                    ],
                    _c['&:hover, &:focus'] = {
                        backgroundColor: palette.themeDarkAlt,
                        borderColor: palette.white
                    },
                    _c[':active'] = {
                        backgroundColor: palette.themePrimary,
                        borderColor: palette.white
                    },
                    _c)
            }
        ],
        subText: [
            classNames.subText,
            {
                margin: 0,
                fontSize: Styling_1.FontSizes.medium,
                color: palette.white,
                fontWeight: Styling_1.FontWeights.semilight
            }
        ]
    };
    var _a, _b, _c;
};
//# sourceMappingURL=TeachingBubble.styles.js.map