<template>
  <div
    ref="contextMenu"
    class="absolute flex flex-col gap-1 border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-50 p-1"
    v-show="show"
    :style="contextMenuStyle"
    @contextmenu.prevent
    @click="closeContextMenu"
  >
    <component :is="component_ref" :data="data" />
    <!-- <template v-for="item in contextMenu" :key="item">
      <hr v-if="item.separator" />
      <div v-else class="flex flex-row gap-2 rounded-md p-1 px-2 items-center"
        :class="typeof item.click == 'function' ? 'cursor-pointer hover:bg-gray-200' : ''" @click="item.click">
        <font-awesome-icon v-if="item.icon" class="text-md" :icon="[item.stroke || 'far', item.icon]" />
        <span class="font-normal">{{ item.title }}</span>
      </div>
    </template> -->
  </div>
</template>

<script setup lang="ts">
import { mapState, mapActions } from "pinia";
import { useContextMenuStore } from "../stores/context-menu";
</script>

<script lang="ts">
export default {
  computed: {
    ...mapState(useContextMenuStore, ["show", "contextMenuStyle", "component_ref", "data"]),
  },
  methods: {
    ...mapActions(useContextMenuStore, ["closeContextMenu"]),
  },
  mounted() {
    document.body.addEventListener("click", (event) => {
      if (!(this.$refs.contextMenu as HTMLElement)?.contains(event.target as HTMLElement)) {
        this.closeContextMenu();
      }
    });
    // document.body.addEventListener("contextmenu", (event) => {
    //   if (!this.$refs.contextMenu?.contains(event.target)) {
    //     this.closeContextMenu();
    //   }
    // });
  },
};
</script>
