<template>
  <div class="autocomplete-wrapper">
    <div class="combo-box-options">
      <div class="search-box">
        <input
          ref="search"
          class="search-input form-control"
          type="text"
          @input="(e) => (query = e.target.value)"
          :value="query"
          :placeholder="props.placeholder"
          autocomplete="off"
          @click.stop
        />
        <button class="clear-button btn btn-sm" @click="clearSearch">
          <Icon icon="mdi:close" class="icon-sm" />
        </button>
      </div>
      <div class="combo-box-items">
        <div
          v-for="(field, i) in filteredOptions"
          :key="i"
          :class="['combo-box-option', activeIndex === i ? 'active' : '']"
          @click="selectOption(field)"
          @mouseenter="activeIndex = i"
        >
          {{ field.label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch, nextTick } from "vue";
import { Icon } from '@iconify/vue';

const props = defineProps({
  options: {
    type: Array,
    default: () => [],
  },
  placeholder: {
    type: String,
    default: "",
  },
  modelValue: {
    type: String,
    default: "",
  },
  show: {
    type: Boolean,
    default: false,
  },
});

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

const query = ref("");
const search = ref(null);
const activeIndex = ref(0);

const filteredOptions = computed(() => {
  return query.value
    ? props.options.filter((option) => {
        return option.label.toLowerCase().includes(query.value.toLowerCase());
      })
    : props.options;
});

function selectOption(option) {
  query.value = "";
  emit("change", option);
  emit("update:show", false);
}

function clearSearch() {
  query.value = "";
  search.value?.focus();
}

watch(() => props.show, (val) => {
  if (val) {
    nextTick(() => {
      search.value?.focus();
    });
  }
});
</script>

<style lang="scss" scoped>
.autocomplete-wrapper {
  z-index: 100;
}

.combo-box-options {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0;
  border: 1px solid #e5e7eb;
}

.combo-box-option {
  font-size: 13px;
  text-align: left;
  border-radius: 4px;
  padding: 6px 10px;
  width: 100%;
  cursor: pointer;

  &:hover,
  &.active {
    background-color: #f3f4f6;
  }
}

.combo-box-items {
  max-height: 200px;
  padding: 5px;
  padding-top: 0px;
  overflow-y: auto;
}

.search-box {
  position: relative;
  padding: 6px;
  
  .clear-button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    border: none;
    background: transparent;
    
    &:hover {
      background-color: #f3f4f6;
      border-radius: 4px;
    }
  }
  
  .search-input {
    width: 100%;
    height: 32px;
    padding: 6px 30px 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    
    &:focus {
      outline: none;
      border-color: #3b82f6;
    }
  }
}

.icon-sm {
  width: 14px;
  height: 14px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
</style>
