<template lang="pug">
  .flex.flex-col.gap-y-2
    base-input-container(:label="label", :style="{width: width}")
      q-select(
        v-model="value",
        :options="items",
        :readonly="readonly"
        :disable="disable",
        :hide-dropdown-icon="hideDropdownIcon"
        :borderless="borderless",
        :outlined="outlined",
        :bg-color="bgColor",
        :standout="standout",
        dense,
        :behavior="behavior",
        emit-value,
        map-options,
        :clearable="clearable"
      )
        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,
    readonly: Boolean,
    width: String,
    clearable: Boolean,
  },
  emits: ["update:modelValue"],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
    textSelect() {
      if (typeof this.modelValue === "string") return this.value;
      return this.value?.label ? this.value.label : this.placeholder;
    },
    iconSelect() {
      return this.value?.icon ? this.value.icon : this.placeholder;
    },
  },
};
</script>
<style lang="sass">
.q-menu
  font-feature-settings: 'pnum' on, 'lnum' on !important
.q-btn--outline:before, .q-field--outlined .q-field__control:before
  border-width: 1px !important
.q-field__marginal
  color: var(--font-grey-color) !important
</style>
