<script setup lang="ts">
const id = useId();
const props = defineProps({
  value: {
    type: String,
    default: undefined,
  },
  type: {
    type: String,
    default: 'text',
  },
  name: {
    type: String,
    required: true,
  },
  label: {
    type: String,
    required: true,
  }
});

// use `toRef` to create reactive references to `name` prop which is passed to `useField`
// this is important because vee-validte needs to know if the field name changes
// https://vee-validate.logaretm.com/v4/guide/composition-api/caveats
const name = toRef(props, 'name');

// we don't provide any rules here because we are using form-level validation
// https://vee-validate.logaretm.com/v4/guide/validation#form-level-validation
const {
  value: inputValue,
  errorMessage,
  handleBlur,
  meta
} = useField(name, undefined, {
  initialValue: props.value
});

const invalid = computed(() => errorMessage.value ? true : undefined);
</script>

<template>
  <div class="grid grid-cols-1 gap-2">
    <FloatLabel variant="on">
      <InputText
        :id="id" v-model="inputValue" class="w-full" :invalid="invalid" @blur="handleBlur"
      />
      <label :for="id">
        {{ label }}
      </label>
    </FloatLabel>
    <Message v-if="errorMessage && meta.touched" class="text-wrap">{{ errorMessage }}</Message>
  </div>
</template>

<style scoped>

</style>