<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  onSelect: Function, // Function to call when the select is changed
  value: String|Number, // The value of the selected option
  label: String, // The label of the select
  disabled: Boolean, // If the select is disabled
  description: String, // The description of the select
  icon: String, // The icon of the select
  color: String, // The color of the select
  options: Array, // The options of the select
  display_as_buttons: {
    type: Boolean,
    default: false // If the select should be displayed as buttons
  }
});

const emits = defineEmits(['update:value']);

const onSelect = (value) => {
  emits('update:value', value);
  if (props.onSelect) {
    props.onSelect(value);
  }
};
</script>

<template>
  <div class="field">
    <label class="label">{{ label }}</label>
    <!-- Select element -->
    <div class="control has-icons-left" v-if="!props.display_as_buttons">
      <div class="select is-rounded is-fullwidth" :class="color">
        <select :value="value" @change="onSelect($event.target.value)" :disabled="disabled">
          <option value="" disabled selected v-if="!props.value">Vælg {{ label }}</option>
          <option v-for="option in props.options" :value="option.value">
            {{ option.label }}
          </option>
        </select>
      </div>
      <span class="icon is-left" v-if="icon">
      <i :class="icon"></i>
    </span>
    </div>
    <!-- Button group for displaying options as buttons -->
    <div class="buttons" v-else>
      <button
        v-for="option in props.options"
        :key="option.value"
        class="button is-rounded"
        :class="{ 'is-active': option.value === value, [color]: true, 'is-disabled': disabled, 'is-success': option.value === value, 'is-light': option.value === value }"
        @click="onSelect(option.value)"
        :disabled="disabled"
      >
        <span class="icon" v-if="option.icon">
          <i :class="option.icon"></i>
        </span>
        <span>
          {{ option.label }}
        </span>
      </button>
    </div>
    <p class="help">{{ description }}</p>
    <slot name="after-select"></slot>
  </div>
</template>

<style scoped>

</style>