<template>
  <div class="relative block" v-click-outside="handleClickOutside">
    <div
        class="flex h-[40px] w-[40px] cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white hover:border-brand-300 active:border-brand-300 active:ring-4 active:ring-brand-700/[.24]"
        @click="toggleDropdown"
    >
      <IconComponent v-if="model" :icon="model" icon-classes="w-5 h-5" :key="model"></IconComponent>
      <PlusIcon class="h-5 w-5" v-else/>
    </div>
    <div
        v-show="isDropdownOpen"
        class="absolute left-[70%] top-[100%] z-10 flex w-[504px] flex-col rounded-xl border border-gray-300 bg-white"
    >
      <div class="flex flex-col gap-4 p-4">
        <div class="relative">
          <input
              v-model="search"
              type="text"
              placeholder="Search all 1000+ icons"
              class="w-full border border-gray-300 rounded px-3 py-2"
          />
          <button
              v-if="search.length > 0"
              @click="search = ''"
              class="absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 cursor-pointer"
          >
            ✕
          </button>
        </div>
        <div class="flex flex-col gap-2">
          <p class="text-sm font-medium text-gray-900">
            <span v-if="icons.length > 0 && search.length > 0"> Search result </span>
            <span v-else-if="icons.length < 1 && search.length > 0"> No search result </span>
            <span v-else-if="search.length < 1 && icons.length > 0"> Frequently used icons </span>
          </p>
          <div class="flex max-h-[196px] flex-wrap gap-1.5 overflow-y-auto">
            <IconComponent
                class="cursor-pointer rounded p-1 hover:bg-gray-100"
                icon-classes="w-8 h-8"
                :icon="icon.name"
                :key="icon.name"
                v-for="icon in icons"
                @selectIcon="update"
            />
          </div>
        </div>
      </div>
      <div class="flex items-center justify-between rounded-b-xl bg-gray-100 px-4 py-3">
        <p class="text-sm font-medium text-gray-900">Not sure about the icon names?</p>
        <a
            href="https://www.untitledui.com/free-icons"
            target="_blank"
            class="text-blue-500 underline"
        >
          View all icons
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { useClickOutside } from "@/components/helpers/clickOutSide.js";
export default {
  directives: {
    clickOutside: useClickOutside,
  },
};
</script>

<script setup>
import {ref, watch, onMounted, defineEmits} from "vue";
import PlusIcon from "@/assets/img/icons/plus.svg";
import IconComponent from "./Icon.vue";
import iconsData from "@/assets/icons.json";
const props = defineProps({
  modelValue: {
    type: String,
    default: null,
  },
});

const model = ref(props.modelValue);
const search = ref("");
const icons = ref([]);
const isDropdownOpen = ref(false);

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


function toggleDropdown() {
  isDropdownOpen.value = !isDropdownOpen.value;
}

watch(search, (value) => {
  icons.value = iconsData.filter((icon) =>
      icon.name.toLowerCase().includes(value.toLowerCase())
  );
});

function update(event) {
  model.value = event;
  emit('update:modelValue', model.value);
  isDropdownOpen.value = false; // Close dropdown after selection
}

function handleClickOutside() {
  if (isDropdownOpen.value) {
    toggleDropdown();
  }
}

onMounted(() => {
  icons.value = iconsData.slice(0, 30); // Load the first 30 icons by default
});
</script>