<script setup>
import { defineProps } from "vue";
import { twMerge } from "tailwind-merge";

const props = defineProps({
  position: Object,
  open: Boolean,
  selectedItem: Object,
  edit: Function,
  add: Function,
  remove: Function,
});
</script>

<template>
  <div
    :class="twMerge('dropdown absolute', open ? 'dropdown-open' : 'hidden')"
    :style="{
      top: `${position.top}px`,
      left: `${position.left}px`,
    }"
  >
    <ul
      tabindex="0"
      class="dropdown-content z-[1] menu p-2 shadow bg-neutral rounded-box w-32"
    >
      <button
        class="btn-ghost text-white no-underline border-0 py-3 hover:rounded-lg"
        @click.stop.prevent="
          (e) => {
            add(!props.selectedItem?.key);
          }
        "
      >
        {{ $t("button.add") }}
      </button>
      <button
        v-if="selectedItem"
        class="btn-ghost text-white no-underline border-0 py-3 hover:rounded-lg"
        @click.stop.prevent="
          (e) => {
            edit(props.selectedItem.key);
          }
        "
      >
      {{ $t("button.rename") }}
      </button>
      <button
        v-if="selectedItem"
        class="btn-ghost text-white no-underline border-0 py-3 hover:rounded-lg"
        @click.stop.prevent="
          (e) => {
            remove();
          }
        "
      >
        {{ $t("button.delete") }}
      </button>
    </ul>
  </div>
</template>

<style lang="scss" scoped></style>
