import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import { emit, inherit } from '../_utils/functional';
import './index.less';

var Switch = {
    functional: true,
    name: 'SnSwitch',
    props: {
        size: String,
        value: null,
        loading: Boolean,
        disabled: Boolean,
        activeColor: String,
        inactiveColor: String,
        activeValue: {
            type: null,
            'default': true
        },
        inactiveValue: {
            type: null,
            'default': false
        },
        innerText: String
    },
    render: function render(h, context) {
        var props = context.props,
            _context$listeners = context.listeners,
            listeners = _context$listeners === undefined ? {} : _context$listeners;
        var size = props.size,
            value = props.value,
            loading = props.loading,
            disabled = props.disabled,
            activeColor = props.activeColor,
            activeValue = props.activeValue,
            inactiveColor = props.inactiveColor,
            inactiveValue = props.inactiveValue,
            innerText = props.innerText;


        var checked = value === activeValue;

        var switchStyle = {
            color: checked ? activeColor : inactiveColor,
            backgroundColor: checked ? activeColor : inactiveColor
        };

        function onClick(event) {
            emit(context, 'click', event);

            if (!disabled && !loading) {
                var newValue = checked ? inactiveValue : activeValue;
                if (!listeners.change) {
                    emit(context, 'input', newValue);
                }

                emit(context, 'change', newValue);
            }
        }

        return h(
            'div',
            _mergeJSXProps([{
                'class': {
                    'sn-switch': true,
                    'sn-switch-on': checked,
                    'sn-switch-disabled': disabled
                },
                attrs: { role: 'switch',

                    'aria-checked': String(checked)
                },
                style: switchStyle, on: {
                    'click': onClick
                }
            }, inherit(context)]),
            [h(
                'div',
                {
                    'class': 'sn-switch-node',
                    style: {
                        boxShadow: activeColor || inactiveColor ? 'none' : ''
                    }
                },
                [innerText ? h(
                    'span',
                    { 'class': 'sn-switch-node-inner-text' },
                    [innerText]
                ) : null]
            )]
        );
    }
};

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

export default Switch;