import { PopupMixin } from '../mixins/popup';
import { isPC, isDef } from '../utils/commonUtil';
import './index.less';

var Popup = {
    name: 'SnPopup',

    mixins: [PopupMixin],
    data: function data() {
        return {
            inited: this.value,
            currentValue: this.value
        };
    },

    props: {
        value: Boolean,
        overlay: {
            type: Boolean,
            'default': true
        },
        position: {
            type: String,
            'default': 'bottom',
            validator: function validator(value) {
                return ['bottom', 'center', 'top', 'right', 'bottom', 'left'].indexOf(value) > -1;
            }
        },
        duration: [Number, String],
        transition: String
    },
    watch: {
        value: function value(val) {
            var _this = this;

            if (val) {
                var activeTagName = window.activeTagName || '';

                if (this.adjustKeyboard && !isPC() && (activeTagName.toUpperCase() === 'INPUT' || activeTagName.toUpperCase() === 'TEXTAREA')) {
                    setTimeout(function () {
                        _this.currentValue = true;
                    }, 500);
                } else {
                    this.currentValue = true;
                }
            } else {
                this.currentValue = false;
            }
        }
    },
    beforeCreate: function beforeCreate() {
        var _this2 = this;

        var createEmitter = function createEmitter(eventName) {
            return function (event) {
                return _this2.$emit(eventName, event);
            };
        };

        this.onClick = createEmitter('click');
        this.onOpen = createEmitter('open');
        this.onOpened = createEmitter('opened');
        this.onClose = createEmitter('close');
        this.onClosed = createEmitter('closed');
    },

    methods: {},
    render: function render() {
        var h = arguments[0];

        if (!this.shouldRender) {
            return;
        }
        var value = this.value,
            currentValue = this.currentValue,
            position = this.position,
            duration = this.duration,
            transition = this.transition,
            $slots = this.$slots;

        var transitionName = position === 'center' ? 'sn-fade' : 'sn-popup-slide-' + position;
        if (transition) {
            transitionName = transition;
        }
        var style = {};
        if (isDef(duration)) {
            style.animationDuration = duration + 'ms';
        }
        var className = {
            'sn-popup': true
        };
        position && (className['sn-popup-' + position] = true);

        var children = null;
        if (value && currentValue || !value && !currentValue) {
            children = $slots['default'];
        }

        return h(
            'transition',
            {
                attrs: {
                    name: transitionName
                },
                on: {
                    'beforeEnter': this.onOpen,
                    'afterEnter': this.onOpened,
                    'beforeLeave': this.onClose,
                    'afterLeave': this.onClosed
                }
            },
            [h(
                'div',
                {
                    directives: [{
                        name: 'show',
                        value: currentValue
                    }],

                    style: style,
                    'class': className,
                    on: {
                        'click': this.onClick
                    }
                },
                [children]
            )]
        );
    }
};

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

export default Popup;