<template>
  <div class="col px-1 mt-1">
    <label v-if="!hideLabel" :for="`${name}-input`" class="form-label">{{
      label
    }}</label>
    <select 
      v-model="value"
      class="form-control"
      :name="name"
      :disabled="readonly"
      :placeholder="label"
    >
      <template v-for="option in options">
        <option>{{ option }}</option>
      </template>
    </select>
    <div class="text-red">{{ errorMessage }}</div>
  </div>
</template>
<script setup>
import { toRef } from "vue";
import { useField } from "vee-validate";
import Multiselect from "@vueform/multiselect";

const props = defineProps({
  modelValue: {
    default: null,
  },
  type: {
    type: String,
    default: "text",
  },
  name: {
    type: String,
    required: false,
  },
  label: {
    type: String,
    required: true,
  },
  successMessage: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  optionText: {
    type: String,
    default: null,
  },
  optionValue: {
    type: String,
    default: null,
  },
  options: {
    type: Array,
    default: [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  mode: {
    type: String,
    required: false,
    default: "single",
  },
  hideLabel: {
    default: false,
  },
});

const name = toRef(props, "name");

const options = computed(() =>
  props.options.map((option) => {
    if (typeof option != "object") {
      return option;
    }
    return {
      value: option[props.optionValue],
      label: option[props.optionText],
    };
  })
);

const { value, errorMessage, handleBlur } = useField(
  () => props.name,
  props.rules,
  {
    syncVModel: true,
  }
);
</script>
