<template>
  <SwitchGroup as="div" :class="{'pointer-events-none': disabled}"
               class="flex items-center"
               @click="clicked"
  >
    <Switch v-model="enabled" :class="[enabled ? 'bg-orange' : 'bg-indigo-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
      <!-- <span class="sr-only">Use setting</span> -->
      <span aria-hidden="true" :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
    </Switch>
    <SwitchLabel as="span" class="ml-3">
      <span v-show="!enabled" class="text-sm text-white">{{ textin }}</span>
      <span v-show="enabled" class="text-sm text-white">{{ textout }}</span>
    </SwitchLabel>
  </SwitchGroup>
</template>

<script>
import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'

export default {
    components: {
        Switch,
        SwitchGroup,
        SwitchLabel,
    },
    props: {
        textin: String,
        textout: String,
        user_id: Number,
        enabled: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
    },
    emits: ['clicked', 'prohibited'],
    methods: {
        clicked(){
            if(this.disabled === false){
                this.$emit('clicked', this.user_id)
            }else{
                this.$emit('prohibited')
            }
        }
    }
}
</script>
