<template>
  <v-col
    :cols="xs"
    :sm="sm || xs"
    :md="md || sm || xs"
    :lg="lg || md || sm || xs"
    :xl="xl || lg || md || sm || xs"
    :xxl="xxl || xl || lg || md || sm || xs"
    :class="$attrs.class + ' px-2'"
  >
    <v-combobox
      v-bind="$attrs"
      v-model="value"
      :label="label"
      :error-messages="errorMessage"
      :name="name"
      :items="items"
      :loading="loading"
      :return-object="false"
      :clearable="clearable"
      style="color: #070b41"
    ></v-combobox>
  </v-col>
</template>

<script lang="ts" setup>
import { useField } from "vee-validate";
import { toTypedSchema } from "@vee-validate/zod";
import * as zod from "zod";

import { MaybeRef, computed, ref } from "vue";

const props = defineProps({
  name: {
    type: String,
    requird: true
  },
  label: {
    type: String,
    required: true
  },
  modelValue: {
    type: String,
    required: true
  },
  clearable: {
    type: Boolean,
    default: false
  },
  items: {
    type: Array,
    default: []
  },
  endpoint: {
    type: String
  },
  xs: { type: String, default: "12" },
  sm: { type: String },
  md: { type: String },
  lg: { type: String },
  xl: { type: String },
  xxl: { type: String }
});

const fieldName = computed<MaybeRef>(() => {
  return props.name;
});

const validationRules = computed<MaybeRef>(() => {
  return toTypedSchema(zod.string().default(props.modelValue));
});

const { value, handleBlur, errorMessage } = useField(
  fieldName,
  validationRules
);

const loading = ref(false);
</script>
