import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import { inherit } from '../_utils/functional';
import { preventDefault } from '../_utils/dom/event';
import './index.less';

function preventTouchMove(event) {
    preventDefault(event, true);
}

var Overlay = {
    name: 'SnOverlay',
    functional: true,
    data: function data() {
        return {};
    },

    props: {
        show: Boolean,
        duration: [Number, String],
        className: null,
        customStyle: Object,
        zIndex: {
            type: [Number, String],
            'default': 1
        }
    },
    render: function render(h, context) {
        var props = context.props,
            slots = context.slots;
        var show = props.show,
            duration = props.duration,
            className = props.className,
            customStyle = props.customStyle,
            zIndex = props.zIndex;

        var style = _extends({
            zIndex: zIndex
        }, customStyle);
        if (duration !== undefined && duration !== null) {
            style.animationDuration = duration + 'ms';
        }

        return h(
            'transition',
            {
                attrs: { name: 'sn-fade' }
            },
            [h(
                'div',
                _mergeJSXProps([{
                    directives: [{
                        name: 'show',
                        value: show
                    }],

                    style: style,
                    'class': ['sn-overlay', className],
                    on: {
                        'touchmove': preventTouchMove
                    }
                }, inherit(context, true)]),
                [slots['default']]
            )]
        );
    }
};

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

export default Overlay;