<script setup lang="ts">
import { useAttrs } from "vue";
import DsFormField from "./DsFormField.vue";
import type { DsSelectOption } from "../../types";

defineOptions({ inheritAttrs: false });
const model = defineModel<string>({ default: "" });
const attrs = useAttrs();
withDefaults(
  defineProps<{
    options: DsSelectOption[];
    id?: string;
    name?: string;
    label?: string;
    description?: string;
    error?: string;
    placeholder?: string;
    disabled?: boolean;
    required?: boolean;
  }>(),
  {
    id: undefined,
    name: undefined,
    label: undefined,
    description: undefined,
    error: undefined,
    placeholder: "Selecciona una opción",
    disabled: false,
    required: false,
  },
);
</script>

<template>
  <DsFormField
    v-slot="field"
    :id="id"
    :label="label"
    :description="description"
    :error="error"
    :required="required"
  >
    <select
      v-bind="attrs"
      :id="field.controlId"
      v-model="model"
      class="ds-control"
      :name="name"
      :disabled="disabled"
      :required="required"
      :aria-invalid="field.invalid || undefined"
      :aria-describedby="field.describedBy"
    >
      <option value="" disabled>{{ placeholder }}</option>
      <option
        v-for="option in options"
        :key="option.value"
        :value="option.value"
        :disabled="option.disabled"
      >
        {{ option.label }}
      </option>
    </select>
  </DsFormField>
</template>
