<template>
  <div class="relative z-50" v-click-outside="click">
    <div class="cursor-pointer text-gray-600 rounded-full hover:bg-gray-50 p-2.5 block" @click="open = !open">
      <DotsHorizontal class="w-5" />
    </div>
    <div class="absolute -left-60 top-6 w-[240px] rounded-lg border border-gray-200 bg-white text-sm" v-if="open">
      <a v-if="enableEdit" class="flex items-center gap-2 px-2.5 cursor-pointer h-[48px] w-auto hover:bg-gray-100 rounded-lg m-1.5 text-gray-700" @click="edit">
        <Pencil class="w-4 text-gray-500" />
        <span class="font-medium"> Edit </span>
      </a>
      <a class="flex items-center gap-2 px-2.5 cursor-pointer h-[48px] w-auto hover:bg-gray-100 rounded-lg m-1.5 text-gray-700" @click="remove">
        <TrashIcon class="w-4 text-gray-500" />
        <span class="font-medium"> Delete </span>
      </a>
    </div>
  </div>
</template>

<script>
import { useClickOutside } from "@/components/helpers/clickOutSide.js";

export default {
  directives: {
    clickOutside: useClickOutside,
  },
};
</script>

<script setup>
import DotsHorizontal from "@/assets/img/icons/dots-horizontal.svg";
import TrashIcon from "@/assets/img/icons/trash-01.svg";
import Pencil from "@/assets/img/icons/pencil-01.svg";
import { ref } from "vue";
const open = ref(false);
const emit = defineEmits(['removeItem']);

const props = defineProps({
  enableEdit: {
    type: Boolean,
    default: false,
  },
});

const click = () => {
  if (!open.value) {
    return;
  }
  open.value = false;
}

const remove = () => {
  emit('removeItem');
  open.value = false;
}

const edit = () => {
  emit('editItem');
  open.value = false;
}
</script>
