<template>
    <span 
        :id="anchor"
        :class="wrapperCssClasses">
        <span
            :class="cssClasses"
            @click="toggle"></span>
        {{ label }}
    </span>
</template>

<script>
export default {
    name: 'switcher',
    props: {
        value: {
            type: [Boolean, Number]
        },
        label: {
            default: '',
            type: String
        },
        checked: {
            default: false,
            type: Boolean
        },
        onToggle: {
            default: () => false,
            type: Function
        },
        lowerZindex: {
            default: false,
            type: Boolean
        },
        anchor: {
            default: '',
            type: String
        },
        disabled: {
            default: false,
            type: Boolean
        },
        customCssClasses: {
            default: '',
            type: String
        }
    },
    data: function() {
        return {
            isChecked: this.checked
        };
    },
    computed: {
        cssClasses: function() {
            return {
                'switcher': true,
                'is-checked': this.isChecked,
                'lower-zindex': this.lowerZindex,
                'has-label': this.label,
                'is-disabled': this.disabled
            };
        },
        wrapperCssClasses () {
            let cssClasses = { 
                'has-label': this.label 
            };

            if (this.customCssClasses && this.customCssClasses.trim() !== '') {
                this.customCssClasses.split(' ').forEach(item => {
                    item = item.replace(/[^a-z0-9\-\_\s]/gmi, '');
                    cssClasses[item] = true;
                });
            }

            return cssClasses;
        }
    },
    watch: {
        value: function (newValue, oldValue) {
            this.isChecked = !!newValue;
        }
    },
    mounted () {
        if (this.value) {
            this.isChecked = !!this.value;
        }
    },
    methods: {
        toggle: function() {
            this.isChecked = !this.isChecked;
            this.$emit('input', this.isChecked);
            this.onToggle(this.isChecked);
        },
        getValue: function() {
            return !!this.isChecked;
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../scss/variables.scss';

.has-label {
    font-size: $app-font-base;
    margin-right: 10px;
}

.switcher {
    background: var(--input-border-dark);
    border-radius: 20px;
    cursor: pointer;
    display: inline-block;
    height: 18px;
    margin-right: .5rem;
    position: relative;
    top: 3px;
    transition: all .28s ease;
    width: 32px;
    z-index: 1;

    &.lower-zindex {
        z-index: 0;
    }

    &:after {
        position: absolute;
        left: 2px;
        top: 2px;
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--input-bg-lightest);
        content: '';
        transition: all .28s ease;
        
    }

    &:active:after {
        transform: scale(0.8);
    }

    &.is-checked {
        background: var(--input-border-focus);

        &:after {
            left: 16px;
            background: var(--input-bg-lightest);
        }
    }

    &.is-disabled {
        opacity: .5;
        pointer-events: none;
    }
}
</style>
