<template>
  <div :class="[
    `${$classPrefix}-select`,
  ]">
    <div :class="[
      `${$classPrefix}-select-btn`,
      `${size}`,
    ]" @click="toggleMenu">
      <span v-if="localValue">{{localValue}}</span>
      <span v-else>{{label}}</span>
      <irbis-icon name="chevron-down" />
    </div>

    <irbis-menu :size="size" ref="menu">
      <irbis-menu-item
        v-for="(item, index) in items"
        :key="index"
        :data="item"
        @onClick="selectItem($event, item)"
        :active="item == localValue"
      >{{item}}</irbis-menu-item>
    </irbis-menu>
  </div>
</template>

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

  props: {
    label: {
      type: String,
      default: ""
    },
    items: {
      type: Array,
      default: () => []
    },
    value: [String, Number, Boolean, Object, Array],
    size: {
      type: String,
      default: "medium"
    }
  },

  data() {
    return {
      localValue: this.value
    };
  },

  watch: {
    value(value) {
      this.localValue = value;
    }
  },

  methods: {
    toggleMenu(event) {
      this.$refs.menu.toggle();
    },

    selectItem(event, item) {
      this.localValue = item;
      this.$emit("input", item);
      this.$refs.menu.hide();
    }
  }
};
</script>