'use strict';

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

var _commonUtil = require('../utils/commonUtil');

var _scroll = require('../_utils/dom/scroll');

var _event = require('../_utils/dom/event');

require('./index.less');

var Sticky = {
    name: 'SnSticky',

    props: {
        zIndex: [Number, String],
        container: null,
        offsetTop: {
            type: [Number, String],
            'default': 0
        }
    },

    data: function data() {
        return {
            fixed: false,
            height: 0,
            transform: 0
        };
    },


    computed: {
        style: function style() {
            if (!this.fixed) {
                return;
            }

            var style = {};

            if ((0, _commonUtil.isDef)(this.zIndex)) {
                style.zIndex = this.zIndex;
            }

            if (this.offsetTop && this.fixed) {
                style.top = this.offsetTop + 'px';
            }

            if (this.transform) {
                style.transform = 'translate3d(0, ' + this.transform + 'px, 0)';
            }

            return style;
        }
    },

    mounted: function mounted() {
        this.scroller = (0, _scroll.getScroller)(this.$el);
        (0, _event.on)(this.scroller, 'scroll', this.onScroll, true);
        this.onScroll();
    },
    activated: function activated() {
        this.scroller = (0, _scroll.getScroller)(this.$el);
        (0, _event.on)(this.scroller, 'scroll', this.onScroll, true);
        this.onScroll();
    },
    deactivated: function deactivated() {
        (0, _event.off)(this.scroller, 'scroll', this.onScroll);
    },
    beforeDestroy: function beforeDestroy() {
        (0, _event.off)(this.scroller, 'scroll', this.onScroll);
    },


    methods: {
        onScroll: function onScroll() {
            var _this = this;

            this.height = this.$el.offsetHeight;

            var container = this.container;

            var offsetTop = +this.offsetTop;
            var scrollTop = (0, _scroll.getScrollTop)(window);
            var topToPageTop = (0, _scroll.getElementTop)(this.$el);

            var emitScrollEvent = function emitScrollEvent() {
                _this.$emit('scroll', {
                    scrollTop: scrollTop,
                    isFixed: _this.fixed
                });
            };

            // The sticky component should be kept inside the container element
            if (container) {
                var bottomToPageTop = topToPageTop + container.offsetHeight;

                if (scrollTop + offsetTop + this.height > bottomToPageTop) {
                    var distanceToBottom = this.height + scrollTop - bottomToPageTop;

                    if (distanceToBottom < this.height) {
                        this.fixed = true;
                        this.transform = -(distanceToBottom + offsetTop);
                    } else {
                        this.fixed = false;
                    }

                    emitScrollEvent();
                    return;
                }
            }

            if (scrollTop + offsetTop > topToPageTop) {
                this.fixed = true;
                this.transform = 0;
            } else {
                this.fixed = false;
            }

            emitScrollEvent();
        }
    },

    render: function render() {
        var h = arguments[0];
        var fixed = this.fixed,
            $slots = this.$slots;

        var style = {
            height: fixed ? this.height + 'px' : null
        };

        return h(
            'div',
            { style: style },
            [h(
                'div',
                {
                    'class': ['sn-sticky', fixed ? 'sn-sticky-fixed' : null],
                    style: this.style
                },
                [$slots['default']]
            )]
        );
    }
};

Sticky.install = function (Vue) {
    Vue.component(Sticky.name, Sticky);
};

exports['default'] = Sticky;
module.exports = exports.default;