<template>
  <input type="checkbox"
         v-model="model"
         v-bind="$props"
         :name="fieldName"
         :disabled="fieldDisabled"
         :required="fieldRequired"
         class="disabled:cursor-not-allowed"
  />
</template>

<script setup>
import {inject, computed} from "vue";
import {useVModel} from '@vueuse/core'
import {checkboxProps} from "@/components/checkbox/checkbox";
import {useInjectedProp} from "@/composables/useInjections";

import {
  CONTROL_NAME, CONTROL_DISABLED, CONTROL_REQUIRED,
} from "@/util/controls";


const props = defineProps({
    ...checkboxProps
  })

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

  const model = useVModel(props, 'modelValue', emit)
  const propDisabled = computed(() => props.disabled)
  const injectedDisabled = inject(CONTROL_DISABLED, propDisabled)

  let fieldName = useInjectedProp(CONTROL_NAME, props, 'name')
  let fieldRequired = useInjectedProp(CONTROL_REQUIRED, props, 'required')
  let fieldDisabled = computed(() => propDisabled.value || injectedDisabled.value)
</script>
