<template>
  <label class="xc_checkbox">
    <input type="checkbox" v-model="tempValue" @keydown.enter="enterEvent" @change="changeCheckbox">
    {{ label }}
  </label>
</template>

<script setup name='XcCheckbox'>
const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean]
  },
  activeValue: {
    type: [Boolean, String, Number],
    default: true
  },
  inactiveValue: {
    type: [Boolean, String, Number],
    default: false
  },
  label: {
    type: String
  }
})
const emit = defineEmits(['update:modelValue'])
const tempValue = ref(false)

const changeCheckbox = () => {
  emit('update:modelValue', tempValue.value ? props.activeValue : props.inactiveValue)
}

const enterEvent = () => {
  tempValue.value = !tempValue.value
  changeCheckbox()
}

watch(() => props.modelValue, () => {
  tempValue.value = props.modelValue === props.activeValue;
  emit('update:modelValue', tempValue.value ? props.activeValue : props.inactiveValue)
}, {deep: true, immediate: true})

</script>

<style scoped lang="scss">
.xc_checkbox {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  user-select: none;
}

</style>
