'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _reactify = require('./reactify');

Ext.require(['Ext.fx.animation.*']);

Ext.define('Ext.reactor.Transition', {
    xtype: 'transition',
    extend: 'Ext.Container',
    initial: true,

    config: {
        /**
         * @cfg {String}
         * The type of animation to use.
         */
        type: 'slide',

        /**
         * @cfg {Number}
         * The duration of animations
         */
        duration: 350,

        /**
         * @cfg {String}
         * The easing function to use for animations
         */
        easing: 'ease',

        /**
         * @cfg {String}
         * The direction of the forward animation.
         */
        direction: 'left',

        /**
         * @cfg {Boolean}
         * Automatically switch directions based on browser URL changes. This should generally
         * be set to true when animating transitions based on client-side routing. Defaults to true.
         */
        bindDirectionToLocation: true
    },

    statics: {
        __reactorUpdateConfigsBeforeChildren: {
            location: true,
            direction: true
        }
    },

    initialize: function initialize() {
        this.newLocation = location.href;
    },
    computeDirection: function computeDirection() {
        if (this.getBindDirectionToLocation()) {
            var _newLocation = this.newLocation,
                newLocation = _newLocation === undefined ? '' : _newLocation,
                _oldLocation = this.oldLocation,
                oldLocation = _oldLocation === undefined ? '' : _oldLocation;


            if (newLocation.length > oldLocation.length && newLocation.indexOf(oldLocation) === 0) {
                return 'left';
            } else if (newLocation.length < oldLocation.length && oldLocation.indexOf(newLocation) === 0) {
                return 'right';
            }
        }

        return this.getDirection();
    },


    // override add to show animation when children are added
    add: function add(items) {
        var _this = this;

        if (!Array.isArray(items)) {
            items = [items];
        }

        var animations = this.createAnimations();
        items.forEach(function (item) {
            return _this.addAnimationConfigs(item);
        });

        Ext.reactor.Transition.superclass.add.call(this, items);

        if (this.initial) {
            // don't show animation on initial render
            animations.showAnimation = null;
            this.initial = false;
        }

        items.forEach(function (item) {
            requestAnimationFrame(function () {
                item.setStyle({ visibility: 'visible' });
                item.show(animations.showAnimation);
            });

            // override destroy to first hide then destroy
            var originalDestroy = item.destroy.bind(item);
            item.destroy = _this.destroyChild.bind(_this, item, originalDestroy);
        });
    },
    insert: function insert(index, item) {
        // order doesn't matter since we're using a floating layout
        this.add(item);
    },
    destroyChild: function destroyChild(item, originalDestroy) {
        if (item.animatingDestroy) return;

        this.oldLocation = this.newLocation || location.href;
        this.newLocation = location.href;

        var _createAnimations = this.createAnimations(),
            hideAnimation = _createAnimations.hideAnimation,
            type = this.getType(),
            direction = this.computeDirection();

        if (type === 'cover') {
            item.setZIndex(direction === 'left' || direction === 'top' ? 0 : 2);
        } else if (type === 'reveal') {
            item.setZIndex(direction === 'left' || direction === 'top' ? 2 : 0);
        }

        item.animatingDestroy = true;

        var animateDestroy = function animateDestroy() {
            if (hideAnimation.type === 'reactor-delay') {
                setTimeout(originalDestroy, hideAnimation.duration);
            } else {
                item.hide(hideAnimation);
                setTimeout(originalDestroy, hideAnimation.duration);
            }
        };

        if (item.activeAnimation) {
            item.activeAnimation.stop();
        }

        requestAnimationFrame(function () {
            return animateDestroy();
        });
    },
    addAnimationConfigs: function addAnimationConfigs(child) {
        child.setConfig({
            zIndex: 1,
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            style: {
                // prevent new view from "flashing" in before animating in safari
                visibility: 'hidden'
            }
        });
    },
    createAnimations: function createAnimations() {
        var type = this.getType(),
            duration = this.getDuration(),
            easing = this.getEasing(),
            direction = this.computeDirection();

        if (type === 'reveal') {
            if (direction === 'left' || direction === 'up') {
                return {
                    showAnimation: null,
                    hideAnimation: { type: 'slideOut', easing: easing, direction: direction, duration: duration }
                };
            } else {
                return {
                    showAnimation: { type: 'slideIn', easing: easing, direction: direction, duration: duration },
                    hideAnimation: { type: 'reactor-delay', duration: duration }
                };
            }
        } else if (type === "cover") {
            if (direction === 'left' || direction === 'up') {
                return {
                    showAnimation: { type: 'slideIn', easing: easing, direction: direction, duration: duration },
                    hideAnimation: { type: 'reactor-delay', duration: duration }
                };
            } else {
                return {
                    showAnimation: null,
                    hideAnimation: { type: 'slideOut', easing: easing, direction: direction, duration: duration }
                };
            }
        } else {
            return {
                showAnimation: { type: type + 'In', easing: easing, direction: direction, duration: duration },
                hideAnimation: { type: type + 'Out', easing: easing, direction: direction, duration: duration }
            };
        }
    }
});

exports.default = (0, _reactify.reactify)('transition');
//# sourceMappingURL=Transition.js.map