import '../_styles/mask.css';
import { addClass, removeClass, once, getScrollBarWidth, on, off } from './dom';
export default {
  zIndex: 2000,

  getZindex() {
    this.zIndex += 1;
    return this.zIndex;
  },

  stack: [],
  mask: null,

  pushStack(vm) {
    if (this.stack.indexOf(vm) > -1) {
      return;
    }

    const lastVm = this.stack[this.stack.length - 1];
    let maxZIndex = this.zIndex;

    if (lastVm) {
      maxZIndex = lastVm.zIndex + 2;
    }

    this.stack.push(vm);
    vm.zIndex = maxZIndex;

    if (vm.appendBody) {
      document.body.appendChild(vm.$el);
      vm.$once('destroy', () => {
        if (vm.$el.parentElement) document.body.removeChild(vm.$el);
      });
    }

    if (!this.mask && vm.mask) {
      const mask = document.createElement('div');
      this.mask = mask;
      clearTimeout(this.timmer);
      addClass(mask, 'gd-mask gd-fade-enter gd-fade-enter-active');

      if (vm.appendBody) {
        document.body.appendChild(mask);
        mask.style.position = 'fixed';
        document.documentElement.style.paddingRight = `${getScrollBarWidth()}px`;
        document.documentElement.style.overflow = 'hidden';
      } else {
        vm.$el.parentNode.appendChild(mask);
        mask.style.position = 'absolute';
      }

      once(mask, 'transitionend', () => {
        removeClass(mask, 'gd-fade-enter-active');
      }); // 预防动画执行失败，导致遮罩一直存留

      this.timmer = setTimeout(() => removeClass(mask, 'gd-fade-enter-active'), 300);
      requestAnimationFrame(() => {
        removeClass(mask, 'gd-fade-enter');
      });
    }

    if (this.mask && vm.mask) {
      this.mask.style.zIndex = maxZIndex - 1;
    }

    if (this.stack.length === 1) {
      this.handleEsc = this.handleEsc.bind(this);
      on(document, 'keydown', this.handleEsc);
    }
  },

  popStack(vm) {
    if (!vm) {
      vm = this.stack[this.stack.length - 1];
    }

    if (!vm) return;
    if (this.stack.indexOf(vm) === -1) return;
    this.stack = this.stack.filter(v => v !== vm);

    if (this.stack.filter(vm => vm.mask).length === 0) {
      document.documentElement.style.paddingRight = '';
      document.documentElement.style.overflow = '';
    }

    if (this.mask) {
      const reverseStack = [...this.stack].reverse();
      const index = reverseStack.findIndex(vm => vm.mask);

      if (index > -1) {
        const vm = reverseStack[index];
        this.mask.style.zIndex = vm.zIndex - 1;
      } else {
        const mask = this.mask;
        clearTimeout(this.timmer);
        addClass(mask, 'gd-mask gd-fade-leave-active');
        once(mask, 'transitionend', () => mask.parentNode && mask.parentNode.removeChild(mask)); // 预防动画执行失败，导致遮罩一直存留

        setTimeout(() => mask.parentNode && mask.parentNode.removeChild(mask), 300);
        window.requestAnimationFrame(() => addClass(mask, 'gd-fade-leave-to'));
        this.mask = null;
      }
    }

    if (this.stack.length === 0) {
      off(document, 'keydown', this.handleEsc);
    }
  },

  handleEsc(e) {
    if (e.keyCode === 27 && this.stack.length) {
      const vm = this.stack[this.stack.length - 1];

      if (vm.keyborad && vm.cancel) {
        vm.cancel();
      }
    }
  }

};