<template>
  <div
    :class="[
      'ui fluid search selection dropdown',
      { 'active visible': isOpen },
      { disabled },
    ]"
    @click="isOpen = !isOpen"
  >
    <div class="default text">{{ selected }}</div>
    <i class="dropdown icon"></i>
    <div :class="['menu', { 'visible transition': isOpen }]">
      <div
        v-for="(option, index) in processedOptions || ['No results found.']"
        @click="select(index)"
        :key="option + index"
        :class="[
          options ? 'item' : 'message',
          { 'active selected': option === selected },
        ]"
      >
        {{ option }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dropdown",

  props: ["options", "selected", "disabled"],

  computed: {
    processedOptions: function () {
      return this.options.map((el) =>
        el.constructor == Object ? el.name : el
      );
    },
  },

  data() {
    return {
      isOpen: false,
    };
  },
  methods: {
    select(index) {
      this.$emit("update:selection", this.options[index]);
    },
  },
};
</script>