'use strict';

exports.__esModule = true;

var _vue = require('vue');

var _vue2 = _interopRequireDefault(_vue);

var _popup = require('element-ui/lib/utils/popup');

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {default: obj};
}

var PopperJS = _vue2.default.prototype.$isServer ? function () {
} : require('./popper');
var stop = function stop(e) {
    return e.stopPropagation();
};

/**
 * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
 * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
 * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
 * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
 * @param {Boolean} [visible=false] Visibility of the popup element.
 * @param {Boolean} [visible-arrow=false] Visibility of the arrow, no style.
 */
exports.default = {
    props: {
        transformOrigin: {
            type: [Boolean, String],
            default: true
        },
        placement: {
            type: String,
            default: 'bottom'
        },
        boundariesPadding: {
            type: Number,
            default: 5
        },
        reference: {},
        popper: {},
        offset: {
            default: 0
        },
        value: Boolean,
        visibleArrow: Boolean,
        arrowOffset: {
            type: Number,
            default: 35
        },
        appendToBody: {
            type: Boolean,
            default: true
        },
        popperOptions: {
            type: Object,
            default: function _default() {
                return {
                    gpuAcceleration: false
                };
            }
        }
    },

    data: function data() {
        return {
            showPopper: false,
            currentPlacement: ''
        };
    },


    watch: {
        value: {
            immediate: true,
            handler: function handler(val) {
                this.showPopper = val;
                this.$emit('input', val);
            }
        },

        showPopper: function showPopper(val) {
            if (this.disabled) return;
            val ? this.updatePopper() : this.destroyPopper();
            this.$emit('input', val);
        }
    },

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

            if (this.$isServer) return;
            this.currentPlacement = this.currentPlacement || this.placement;
            if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
                return;
            }

            var options = this.popperOptions;
            var popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper;
            var reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference;

            if (!reference && this.$slots.reference && this.$slots.reference[0]) {
                reference = this.referenceElm = this.$slots.reference[0].elm;
            }

            if (!popper || !reference) return;
            if (this.visibleArrow) this.appendArrow(popper);
            if (this.appendToBody) document.body.appendChild(this.popperElm);
            if (this.popperJS && this.popperJS.destroy) {
                this.popperJS.destroy();
            }

            options.placement = this.currentPlacement;
            options.offset = this.offset;
            options.arrowOffset = this.arrowOffset;
            this.popperJS = new PopperJS(reference, popper, options);
            this.popperJS.onCreate(function (_) {
                _this.$emit('created', _this);
                _this.resetTransformOrigin();
                _this.$nextTick(_this.updatePopper);
            });
            if (typeof options.onUpdate === 'function') {
                this.popperJS.onUpdate(options.onUpdate);
            }
            this.popperJS._popper.style.zIndex = _popup.PopupManager.nextZIndex();
            this.popperElm.addEventListener('click', stop);
        },
        updatePopper: function updatePopper() {
            var popperJS = this.popperJS;
            if (popperJS) {
                popperJS.update();
                if (popperJS._popper) {
                    popperJS._popper.style.zIndex = _popup.PopupManager.nextZIndex();
                }
            } else {
                this.createPopper();
            }
        },
        doDestroy: function doDestroy(forceDestroy) {
            /* istanbul ignore if */
            if (!this.popperJS || this.showPopper && !forceDestroy) return;
            this.popperJS.destroy();
            this.popperJS = null;
        },
        destroyPopper: function destroyPopper() {
            if (this.popperJS) {
                this.resetTransformOrigin();
            }
        },
        resetTransformOrigin: function resetTransformOrigin() {
            if (!this.transformOrigin) return;
            var placementMap = {
                top: 'bottom',
                bottom: 'top',
                left: 'right',
                right: 'left'
            };
            var placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0];
            var origin = placementMap[placement];
            this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string' ? this.transformOrigin : ['top', 'bottom'].indexOf(placement) > -1 ? 'center ' + origin : origin + ' center';
        },
        appendArrow: function appendArrow(element) {
            var hash = void 0;
            if (this.appended) {
                return;
            }

            this.appended = true;

            for (var item in element.attributes) {
                if (/^_v-/.test(element.attributes[item].name)) {
                    hash = element.attributes[item].name;
                    break;
                }
            }

            var arrow = document.createElement('div');

            if (hash) {
                arrow.setAttribute(hash, '');
            }
            arrow.setAttribute('x-arrow', '');
            arrow.className = 'popper__arrow';
            element.appendChild(arrow);
        }
    },

    beforeDestroy: function beforeDestroy() {
        this.doDestroy(true);
        if (this.popperElm && this.popperElm.parentNode === document.body) {
            this.popperElm.removeEventListener('click', stop);
            document.body.removeChild(this.popperElm);
        }
    },


    // call destroy in keep-alive mode
    deactivated: function deactivated() {
        this.$options.beforeDestroy[0].call(this);
    }
};