"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Styling_1 = require("../../Styling");
function continuousPulseStepOne(beaconColorOne) {
    return {
        borderColor: beaconColorOne,
        borderWidth: '0px',
        width: '35px',
        height: '35px'
    };
}
function continuousPulseStepTwo() {
    return {
        opacity: '1',
        borderWidth: '10px'
    };
}
function continuousPulseStepThree() {
    return {
        opacity: 1
    };
}
function continuousPulseStepFour(beaconColorTwo) {
    return {
        borderWidth: '0',
        width: '150px',
        height: '150px',
        opacity: '0',
        borderColor: beaconColorTwo
    };
}
function continuousPulseStepFive(beaconColorOne) {
    return tslib_1.__assign({}, continuousPulseStepOne(beaconColorOne), {
        opacity: '0'
    });
}
exports.translateOne = Styling_1.keyframes({
    '0%': {
        transform: 'translate(0, 0)',
        animationTimingFunction: 'linear'
    },
    '78.57%': {
        transform: 'translate(0, 0)',
        animationTimingFunction: 'cubic-bezier(0.62, 0, 0.56, 1)'
    },
    '82.14%': {
        transform: 'translate(0, -5px)',
        animationTimingFunction: 'cubic-bezier(0.58, 0, 0, 1)'
    },
    '84.88%': {
        transform: 'translate(0, 9px)',
        animationTimingFunction: 'cubic-bezier(1, 0, 0.56, 1)'
    },
    '88.1%': {
        transform: 'translate(0, -2px)',
        animationTimingFunction: 'cubic-bezier(0.58, 0, 0.67, 1)'
    },
    '90.12%': {
        transform: 'translate(0, 0)',
        animationTimingFunction: 'linear'
    },
    '100%': {
        transform: 'translate(0, 0)'
    }
});
exports.scaleOne = Styling_1.keyframes({
    '0%': {
        transform: ' scale(0)',
        animationTimingFunction: 'linear'
    },
    '14.29%': {
        transform: 'scale(0)',
        animationTimingFunction: 'cubic-bezier(0.84, 0, 0.52, 0.99)'
    },
    '16.67%': {
        transform: 'scale(1.15)',
        animationTimingFunction: 'cubic-bezier(0.48, -0.01, 0.52, 1.01)'
    },
    '19.05%': {
        transform: 'scale(0.95)',
        animationTimingFunction: 'cubic-bezier(0.48, 0.02, 0.52, 0.98)'
    },
    '21.43%': {
        transform: 'scale(1)',
        animationTimingFunction: 'linear'
    },
    '42.86%': {
        transform: 'scale(1)',
        animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)'
    },
    '45.71%': {
        transform: 'scale(0.8)',
        animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)'
    },
    '50%': {
        transform: 'scale(1)',
        animationTimingFunction: 'linear'
    },
    '90.12%': {
        transform: 'scale(1)',
        animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)'
    },
    '92.98%': {
        transform: 'scale(0.8)',
        animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)'
    },
    '97.26%': {
        transform: 'scale(1)',
        animationTimingFunction: 'linear'
    },
    '100%': {
        transform: 'scale(1)'
    }
});
exports.rotateOne = Styling_1.keyframes({
    '0%': {
        transform: 'rotate(0deg)',
        animationTimingFunction: 'linear'
    },
    '83.33%': {
        transform: ' rotate(0deg)',
        animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
    },
    '83.93%': {
        transform: 'rotate(15deg)',
        animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
    },
    '84.52%': {
        transform: 'rotate(-15deg)',
        animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
    },
    '85.12%': {
        transform: 'rotate(15deg)',
        animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
    },
    '85.71%': {
        transform: 'rotate(-15deg)',
        animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)'
    },
    '86.31%': {
        transform: 'rotate(0deg)',
        animationTimingFunction: 'linear'
    },
    '100%': {
        transform: 'rotate(0deg)'
    }
});
function getStyles(props) {
    var ContinuousPulse = Styling_1.keyframes({
        '0%': continuousPulseStepOne(props.beaconColorOne),
        '1.42%': continuousPulseStepTwo(),
        '3.57%': continuousPulseStepThree(),
        '7.14%': continuousPulseStepFour(props.beaconColorTwo),
        '8%': continuousPulseStepFive(props.beaconColorOne),
        '29.99%': continuousPulseStepFive(props.beaconColorOne),
        '30%': continuousPulseStepOne(props.beaconColorOne),
        '31.42%': continuousPulseStepTwo(),
        '33.57%': continuousPulseStepThree(),
        '37.14%': continuousPulseStepFour(props.beaconColorTwo),
        '38%': continuousPulseStepFive(props.beaconColorOne),
        '79.42%': continuousPulseStepFive(props.beaconColorOne),
        '79.43': continuousPulseStepOne(props.beaconColorOne),
        '81.85': continuousPulseStepTwo(),
        '83.42': continuousPulseStepThree(),
        '87%': continuousPulseStepFour(props.beaconColorTwo),
        '100%': {}
    });
    return {
        root: [
            {
                position: 'relative'
            }
        ],
        // The pulsing beacon
        pulsingBeacon: [
            {
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                width: '0px',
                height: '0px',
                borderRadius: '225px',
                borderStyle: 'solid',
                opacity: '0'
            },
            (props.collapsed && props.isBeaconAnimating) && {
                animationName: ContinuousPulse,
                animationIterationCount: '1',
                animationDuration: '14s',
                zIndex: 1000,
                animationDelay: '2s'
            }
        ],
        // Translate Animation Layer
        translateAnimationContainer: [
            {
                width: '100%',
                height: '100%'
            },
            props.collapsed && {
                animationDuration: '14s',
                animationTimingFunction: 'linear',
                animationDirection: 'normal',
                animationIterationCount: '1',
                animationDelay: '0s',
                animationFillMode: 'forwards',
                animationName: exports.translateOne,
                transition: 'opacity 0.5s ease-in-out'
            },
            (!props.collapsed) && {
                opacity: '1'
            }
        ],
        // Scale Animation Layer
        scaleAnimationLayer: [
            {
                width: '100%',
                height: '100%'
            },
            props.collapsed && {
                animationDuration: '14s',
                animationTimingFunction: 'linear',
                animationDirection: 'normal',
                animationIterationCount: '1',
                animationDelay: '0s',
                animationFillMode: 'forwards',
                animationName: exports.scaleOne
            }
        ],
        // Rotate Animation Layer
        rotateAnimationLayer: [
            {
                width: '100%',
                height: '100%',
                opacity: '0.8'
            },
            props.collapsed && {
                animationDuration: '14s',
                animationTimingFunction: 'linear',
                animationDirection: 'normal',
                animationIterationCount: '1',
                animationDelay: '0s',
                animationFillMode: 'forwards',
                animationName: exports.rotateOne
            },
            !props.collapsed && {
                opacity: '1'
            }
        ],
        // Layer Host, defaults to collapsed
        entityHost: [
            {
                position: 'relative',
                outline: 'none',
                overflow: 'hidden',
                backgroundColor: props.color,
                borderRadius: props.width,
                transition: 'border-radius 250ms, width 500ms, height 500ms cubic-bezier(0.5, 0, 0, 1)',
                visibility: 'hidden'
            },
            !props.isMeasuring && {
                width: props.width,
                height: props.height,
                visibility: 'visible'
            },
            !props.collapsed && {
                borderRadius: '1px',
                opacity: '1',
                width: props.entityHostWidth,
                height: props.entityHostHeight
            }
        ],
        entityInnerHost: [
            {
                transition: 'transform 500ms cubic-bezier(0.5, 0, 0, 1)',
                transformOrigin: 'top left',
                transform: 'scale(0)'
            },
            (!props.collapsed) && {
                width: props.entityHostWidth,
                height: props.entityHostHeight,
                transform: 'scale(1)'
            },
            (!props.isMeasuring) && {
                visibility: 'visible',
            }
        ]
    };
}
exports.getStyles = getStyles;
//# sourceMappingURL=Coachmark.styles.js.map