<template>
  <q-field
    :model-value="selected"
    :rules="rules"
    :label="label"
    outlined
    stack-label
    no-error-icon
    class="mdi-picker-field"
    readonly
  >
    <template #control>
      <div class="self-center full-width flex flex-center">
        <q-icon
          :name="selected || 'mdi-image-search-outline'"
          :color="selected ? 'primary' : 'grey-5'"
          size="2.25rem"
          class="cursor-pointer"
        >
          <q-menu @hide="filterText = ''">
            <div style="width: 280px">
              <q-input
                v-model="filterText"
                dense
                outlined
                autofocus
                placeholder="Buscar ícone..."
                class="q-pa-sm"
                @keydown.stop
              >
                <template #prepend>
                  <q-icon name="mdi-magnify" size="sm" />
                </template>
              </q-input>
              <q-separator />
              <q-scroll-area style="height: 240px">
                <q-list dense>
                  <q-item
                    v-for="icon in filteredIcons"
                    :key="icon"
                    v-close-popup
                    clickable
                    :active="icon === selected"
                    active-class="bg-purple-1 text-primary"
                    @click="selected = icon"
                  >
                    <q-item-section avatar style="min-width: 32px">
                      <q-icon :name="icon" size="sm" color="primary" />
                    </q-item-section>
                    <q-item-section class="text-caption">{{ icon }}</q-item-section>
                  </q-item>
                  <q-item v-if="!filteredIcons.length" disable>
                    <q-item-section class="text-caption text-grey text-center">
                      Nenhum ícone encontrado
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-scroll-area>
            </div>
          </q-menu>
        </q-icon>
      </div>
    </template>

    <template #append>
      <q-icon
        v-if="selected"
        name="mdi-close-circle"
        color="grey-5"
        size="xs"
        class="cursor-pointer"
        @click.stop="selected = null"
      />
    </template>
  </q-field>
</template>

<script setup>
import { ref, computed } from "vue";
import { MDI_ICONS } from "src/options/iconsOptions";

const props = defineProps({
  modelValue: {
    type: String,
    default: null,
  },
  label: {
    type: String,
    default: "Ícone",
  },
  rules: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:modelValue"]);

const selected = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});


const filterText = ref("");

const filteredIcons = computed(() => {
  if (!filterText.value) return MDI_ICONS;
  return MDI_ICONS.filter((icon) =>
    icon.includes(filterText.value.toLowerCase()),
  );
});

</script>

<style scoped>
.mdi-picker-field {
  width: 100px;
}

:deep(.mdi-picker-field .q-field__control) {
  height: 76px !important;
  min-height: 76px !important;
  cursor: pointer;
}

:deep(.mdi-picker-field .q-field__native) {
  min-height: 50px;
  padding-top: 0;
}
</style>
