<template lang="pug">
  .flex.flex-col.gap-y-2
    base-input-container(:label="label")
      q-select(
        v-model="value",
        :options="items",
        :disable="disable",
        :hide-dropdown-icon="hideDropdownIcon"
        :borderless="borderless",
        :outlined="outlined",
        :bg-color="bgColor",
        :standout="standout",
        dense,
        emit-value,
        map-options
      )
        template(v-slot:selected)
          span(v-if="!value?.icon") {{ textSelect }}
          q-icon(
            v-else,
            :name="iconSelect",
            size="20px"
          )
        template(
          v-slot:option="scope",
          v-if="value?.icon"
        )
          q-item(v-bind="scope.itemProps", style="justify-content: center")
            q-item-section(avatar, style="padding: 0px; min-width: 0px")
              q-icon(:name="scope.opt.icon", size="20px")
</template>

<script>
import BaseMenu from "@/components/base/BaseMenu";
import BaseInputContainer from "@/components/base/BaseInputContainer";

export default {
  name: "VSelect",
  components: { BaseMenu, BaseInputContainer },
  props: {
    placeholder: String,
    hideDropdownIcon: Boolean,
    borderless: Boolean,
    modelValue: [Object, String],
    bgColor: {
      type: String,
      default: "white",
    },
    outlined: {
      type: Boolean,
      default: true,
    },
    standout: {
      type: [Boolean, String],
      default: false,
    },
    items: {
      type: Array,
      default: () => [],
    },
    behavior: {
      type: String,
      default: "menu",
    },
    icon: {
      type: String,
      default: null,
    },
    size: {
      type: Number,
      default: 18,
    },
    disable: Boolean,
    label: String,
  },
  emits: ["update:modelValue"],
  data() {
    return {
      open: false,
    };
  },
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
    textSelect() {
      return this.value?.label ? this.value.label : this.placeholder;
    },
    iconSelect() {
      return this.value?.icon ? this.value.icon : this.placeholder;
    },
  },
};
</script>
