<template>
    <div class="relative lg:absolute w-12 flex items-center lg:ltr:right-0 lg:rtl:left-0 xl:-top-12 cursor-pointer">
        <input type="radio" :name="name" v-show="selected == '0'" @click="enabled = 1" value="1" id="enabled-1" v-model="selected" class="w-full h-full absolute right-0 z-20 opacity-0 cursor-pointer">
        <input type="radio" :name="name" v-show="selected == '1'" @click="enabled = 0" value="0" id="enabled-0" v-model="selected" class="w-full h-full absolute left-0 z-20 opacity-0 cursor-pointer">

        <div class="absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition transform" :class="selected == '1' ? 'translate-x-full' : 'translate-x-0'"></div>
        <div class="block w-full h-7 rounded-full transition transition-color" :class="selected == '1' ? 'bg-green' : 'bg-green-200'"></div>
    </div>
</template>

<script>
export default {
    name: 'akaunting-switch',

    props: {
        name: null,

        value: {
            type: [String, Number, Array, Object, Boolean],
            default: '1',
            description: "Selectbox selected value"
        },

        model: {
            type: [String, Number, Array, Object, Boolean],
            default: '',
            description: "Selectbox selected model"
        },

        inputData: {
            type: [String, Number, Array, Object, Boolean],
        },
    },

    data() {
        return {
            enabled: 1,
            selected: this.value,
        }
    },

    methods: {
        change() {
            this.$emit('interface', this.selected);

            this.$emit('change', this.selected);
        }
    },

    mounted() {
        this.$emit('interface', this.selected);

        setTimeout(function() {
            this.change();
        }.bind(this), 800);
    },

    watch: {
        value: function(val) {
            this.selected = val;
        },

        selected: function(val) {
            this.change();
        },
    }
}
</script>