import classnames from '../_utils/classnames';
import Badge from '../badge';

export default {
    props: {
        dot: Boolean,
        type: String,
        info: [Number, String],
        color: String,
        title: String,
        isActive: Boolean,
        ellipsis: Boolean,
        disabled: Boolean,
        scrollable: Boolean,
        activeColor: String,
        inactiveColor: String,
        swipeThreshold: [Number, String]
    },

    computed: {
        style: function style() {
            var style = {};
            var color = this.color,
                isActive = this.isActive;

            var isCard = this.type === 'card';

            // card theme color
            if (color && isCard) {
                style.borderColor = color;

                if (!this.disabled) {
                    if (isActive) {
                        style.backgroundColor = color;
                    } else {
                        style.color = color;
                    }
                }
            }

            var titleColor = isActive ? this.activeColor : this.inactiveColor;
            if (titleColor) {
                style.color = titleColor;
            }

            if (this.scrollable && this.ellipsis) {
                style.flexBasis = 88 / this.swipeThreshold + '%';
            }

            return style;
        }
    },

    methods: {
        onClick: function onClick() {
            this.$emit('click');
        }
    },

    render: function render() {
        var h = arguments[0];
        var isActive = this.isActive,
            disabled = this.disabled,
            ellipsis = this.ellipsis,
            style = this.style,
            title = this.title,
            dot = this.dot,
            info = this.info,
            $slots = this.$slots;

        return h(
            'div',
            {
                attrs: {
                    role: 'tab',
                    'aria-selected': isActive
                },
                'class': classnames({
                    'sn-tab': true,
                    'sn-tab-active': isActive,
                    disabled: disabled,
                    complete: !ellipsis,
                    'sn-ellipsis': ellipsis
                }),
                style: style,
                on: {
                    'click': this.onClick
                }
            },
            [h(
                'span',
                { 'class': 'sn-tab-text' },
                [$slots['default'] || title, h(Badge, {
                    attrs: { dot: dot, info: info }
                })]
            )]
        );
    }
};