import { useField } from 'vee-validate'
import { computed, ref, toRef } from 'vue'
import type { ComponentInternalInstance } from 'vue'

interface Props {
  id: string
  value: string | number
  label?: string
  disabled?: boolean
  modelValue?: string | number
  required?: boolean
}

export default (props: Props, slots: ComponentInternalInstance['slots']) => {
  const { checked, handleChange } = useField(
    toRef(props, 'id'),
    computed(() => ({
      required: props.required,
    })),
    {
      type: 'radio',
      initialValue: props.modelValue,
      checkedValue: props.value,
      syncVModel: true,
    },
  )

  const focused = ref(false)

  const active = computed(() => !props.disabled)
  const hasLabel = computed(() => !!props.label || slots.default)

  return {
    focused,
    active,
    checked,
    hasLabel,
    handleChange,
  }
}