import Vue from 'vue';
import { context } from './context';
import { TouchMixin } from '../touch';
import { PortalMixin } from '../portal';
import { on, off, preventDefault } from '../../_utils/dom/event';
import { openOverlay, closeOverlay, updateOverlay } from './overlay';
import { getScroller } from '../../_utils/dom/scroll';
import { isPC } from '../../utils/commonUtil';

export var PopupMixin = {
    mixins: [TouchMixin, PortalMixin({
        afterPortal: function afterPortal() {
            if (this.overlay) {
                updateOverlay();
            }
        }
    })],

    props: {
        value: Boolean,
        overlay: Boolean,
        overlayStyle: Object,
        overlayClass: String,
        closeOnClickOverlay: {
            type: Boolean,
            'default': true
        },
        zIndex: [Number, String],
        lockScroll: {
            type: Boolean,
            'default': true
        },
        lazyRender: {
            type: Boolean,
            'default': true
        },
        adjustKeyboard: {
            type: Boolean,
            'default': true
        }
    },

    data: function data() {
        return {
            inited: this.value
        };
    },


    computed: {
        shouldRender: function shouldRender() {
            return this.inited || !this.lazyRender;
        }
    },

    watch: {
        value: function value(val) {
            var _this = this;

            var type = val ? 'open' : 'close';
            this.inited = this.inited || this.value;
            var activeTagName = window.activeTagName || '';

            if (val) {
                if (this.adjustKeyboard && !isPC() && (activeTagName.toUpperCase() === 'INPUT' || activeTagName.toUpperCase() === 'TEXTAREA')) {
                    setTimeout(function () {
                        _this[type]();
                        _this.$emit(val ? 'show' : 'hide');
                    }, 500);
                } else {
                    this[type]();
                    this.$emit(val ? 'show' : 'hide');
                }
            } else {
                this[type]();
                this.$emit(val ? 'show' : 'hide');
            }
        },

        overlay: 'renderOverlay'
    },

    mounted: function mounted() {
        if (this.value) {
            this.open();
        }
    },


    /* istanbul ignore next */
    activated: function activated() {
        if (this.value) {
            this.open();
        }
    },
    beforeDestroy: function beforeDestroy() {
        this.close();

        if (this.getContainer && this.$parent && this.$parent.$el) {
            this.$parent.$el.appendChild(this.$el);
        }
    },


    /* istanbul ignore next */
    deactivated: function deactivated() {
        this.close();
    },


    methods: {
        open: function open() {
            /* istanbul ignore next */
            if (this.opened) {
                return;
            }

            // cover default zIndex
            if (this.zIndex !== undefined) {
                context.zIndex = this.zIndex;
            }

            this.opened = true;
            this.renderOverlay();

            if (this.lockScroll) {
                on(document, 'touchstart', this.touchStart);
                on(document, 'touchmove', this.onTouchMove);

                if (!context.lockCount) {
                    document.body.classList.add('sn-overflow-hidden');
                }
                context.lockCount++;
            }
        },
        close: function close() {
            if (!this.opened) {
                return;
            }

            if (this.lockScroll) {
                context.lockCount--;
                off(document, 'touchstart', this.touchStart);
                off(document, 'touchmove', this.onTouchMove);

                if (!context.lockCount) {
                    document.body.classList.remove('sn-overflow-hidden');
                }
            }

            this.opened = false;
            closeOverlay(this);
            this.$emit('input', false);
        },
        onTouchMove: function onTouchMove(event) {
            this.touchMove(event);
            var direction = this.deltaY > 0 ? '10' : '01';
            var el = getScroller(event.target, this.$el);
            var scrollHeight = el.scrollHeight,
                offsetHeight = el.offsetHeight,
                scrollTop = el.scrollTop;

            var status = '11';

            /* istanbul ignore next */
            if (scrollTop === 0) {
                status = offsetHeight >= scrollHeight ? '00' : '01';
            } else if (scrollTop + offsetHeight >= scrollHeight) {
                status = '10';
            }

            /* istanbul ignore next */
            if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))) {
                preventDefault(event, true);
            }
        },
        renderOverlay: function renderOverlay() {
            var _this2 = this;

            if (!this.value) {
                return;
            }

            this.$nextTick(function () {
                _this2.updateZIndex(_this2.overlay ? 1 : 0);

                if (_this2.overlay) {
                    openOverlay(_this2, {
                        zIndex: context.zIndex++,
                        duration: _this2.duration,
                        className: _this2.overlayClass,
                        customStyle: _this2.overlayStyle
                    });
                } else {
                    closeOverlay(_this2);
                }
            });
        },
        updateZIndex: function updateZIndex() {
            var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

            this.$el.style.zIndex = ++context.zIndex + value;
        }
    }
};