<template>
  <Switch
      v-model="enabled"
      :class="enabled ? 'bg-ui-gold' : 'bg-ui-gray'"
      class="relative inline-flex items-center h-6 rounded-full w-11"
  >
    <span class="sr-only">{{props.description}}</span>
    <span
        :class="enabled ? 'translate-x-6' : 'translate-x-1'"
        class="inline-block w-4 h-4 transform bg-white rounded-full"
    />
  </Switch>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Switch } from '@headlessui/vue'
import { onKeyStroke } from '@vueuse/core'


// todo: need to wire up a prop & events for v-model

const props = defineProps({
  modelValue: { type: Boolean, required: false, default: false },

  description: { type: String, default: 'Ais Toggle Control'}
})

const emit = defineEmits(['update:modelValue'])

// function updateFlag(value) {
//   emit('update:modelValue', value)
// }


let enabled = computed({
  get() {
    return props.modelValue
  },

  set(val) {
    emit('update:modelValue', val)
  }
})

// Example use of vueuse function
// Since we're not watching the prop, this only works the 1st time
// Still need to figure out best way to handle this kind of state
onKeyStroke('Enter', (e) => {
  console.log('ARROW DOWN', e)
  emit('update:modelValue', !enabled)
})

</script>
