<template>
  <input
      ref="input"
      :type="props.type"
      :id="fieldId"
      :name="fieldName"
      :placeholder="placeholder"
      :disabled="fieldDisabled"
      :required="fieldRequired"
      :autocomplete="autocomplete"
      v-model="fieldModel"
  />
</template>

<script setup>

  import { inject, computed, ref } from 'vue'
  import { useVModel } from '@vueuse/core'
  import { inputProps } from "@/components/input/input-props";
  import {useInjectedProp} from "@/composables/useInjections";
  import {CONTROL_MODEL, CONTROL_ID, CONTROL_NAME, CONTROL_DISABLED, CONTROL_REQUIRED }
    from "@/util/controls";

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

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

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

  // Injected values will take precedence over prop values
  let fieldModel = inject(CONTROL_MODEL, model)
  let fieldId = useInjectedProp(CONTROL_ID, props, 'id')
  let fieldName = useInjectedProp(CONTROL_NAME, props, 'name')
  let fieldRequired = useInjectedProp(CONTROL_REQUIRED, props, 'required')

  const injectedDisabled = useInjectedProp(CONTROL_DISABLED, props, 'disabled')
  const fieldDisabled = computed(() => injectedDisabled.value || props.disabled)

  const input = ref(null)
  const focus = () => input.value.focus()
  defineExpose({ focus })
</script>
