import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import { TouchMixin } from '../mixins/touch';

var MIN_SWIPE_DISTANCE = 50;

export default {
    mixins: [TouchMixin],

    props: {
        count: Number,
        duration: [Number, String],
        animated: Boolean,
        swipeable: Boolean,
        currentIndex: Number
    },

    computed: {
        style: function style() {
            if (this.animated) {
                return {
                    transform: 'translate3d(' + -1 * this.currentIndex * 100 + '%, 0, 0)',
                    transitionDuration: this.duration + 's'
                };
            }
            return {};
        },
        listeners: function listeners() {
            if (this.swipeable) {
                return {
                    touchstart: this.touchStart,
                    touchmove: this.touchMove,
                    touchend: this.onTouchEnd,
                    touchcancel: this.onTouchEnd
                };
            }
            return {};
        }
    },

    methods: {
        // watch swipe touch end
        onTouchEnd: function onTouchEnd() {
            var direction = this.direction,
                deltaX = this.deltaX,
                currentIndex = this.currentIndex;

            /* istanbul ignore else */

            if (direction === 'horizontal' && this.offsetX >= MIN_SWIPE_DISTANCE) {
                /* istanbul ignore else */
                if (deltaX > 0 && currentIndex !== 0) {
                    this.$emit('change', currentIndex - 1);
                } else if (deltaX < 0 && currentIndex !== this.count - 1) {
                    this.$emit('change', currentIndex + 1);
                }
            }
        },
        genChildren: function genChildren() {
            var h = this.$createElement;

            if (this.animated) {
                return h(
                    'div',
                    { 'class': 'sn-tabs-track', style: this.style },
                    [this.$slots['default']]
                );
            }

            return this.$slots['default'];
        }
    },

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

        return h(
            'div',
            _mergeJSXProps([{
                'class': ['sn-tabs-content', this.animated ? 'sn-tabs-content-animated' : '']
            }, { on: this.listeners }]),
            [this.genChildren()]
        );
    }
};