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

<script setup>
import {inject, computed} from 'vue'
import {useVModel} from '@vueuse/core'
import {radioProps} from "@/components/radio/radio";
import {useInjectedProp} from "@/composables/useInjections";
import {CONTROL_NAME, CONTROL_DISABLED, CONTROL_REQUIRED} from "@/util/controls";


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

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

const model = useVModel(props, 'modelValue', emit)

const isChecked = computed(() => props.modelValue === props.value)

let fieldName = useInjectedProp(CONTROL_NAME, props, 'name')
const fieldDisabled = useInjectedProp(CONTROL_DISABLED, props, 'disabled')
let fieldRequired = useInjectedProp(CONTROL_REQUIRED, props, 'required')

</script>
