<script setup lang="ts">
import { computed } from "vue";
import type { ExtendedColors, SizeModifierType } from "@/types/PropTypes";

const model = defineModel<string | number | undefined>({ required: true });

const props = defineProps<{
  required?: boolean;
  sizeModifier?: SizeModifierType;
  border?: ExtendedColors;
  mapping: Record<string, string | number>;
  allowRaw?: boolean;
}>();

const emit = defineEmits<{
  (e: "switch-to-raw"): void;
}>();

const dynamicCssClasses = computed<string[]>(() => {
  const cssClasses = [];
  if (props.sizeModifier) {
    cssClasses.push(`form-select-${props.sizeModifier}`);
  }
  if (props.border) {
    cssClasses.push("border", `border-${props.border}`);
  }
  return cssClasses;
});
</script>

<template>
  <select
    v-model="model"
    class="form-select"
    :class="dynamicCssClasses"
    :required="required"
  >
    <option
      v-for="(val, paramOption) in mapping"
      :key="paramOption"
      :value="val"
    >
      {{ paramOption }}
    </option>
  </select>
  <button
    v-if="allowRaw"
    type="button"
    class="btn btn-outline-secondary"
    @click="emit('switch-to-raw')"
  >
    Advanced
  </button>
</template>

<style scoped></style>