<template>
  <!-- Context menu (tile) — Teleport so it is not clipped by map/overflow -->
  <Teleport to="body">
  <div
    v-show="contextMenu.tile.show"
    class="fixed z-[9999] bg-base-100/95 backdrop-blur-xl shadow-xl rounded-lg border border-base-300 py-1 min-w-[180px] transition-opacity duration-150"
    :style="{ left: contextMenu.tile.x + 'px', top: contextMenu.tile.y + 'px' }"
  >
    <button
      type="button"
      class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors"
      @click="onWipeTile(contextMenu.tile.data?.coords)"
    >
      Wipe tile {{ contextMenu.tile.data?.coords?.x }}, {{ contextMenu.tile.data?.coords?.y }}
    </button>
    <button
      type="button"
      class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors"
      @click="onRewriteCoords(contextMenu.tile.data?.coords)"
    >
      Rewrite tile coords
    </button>
  </div>
  <!-- Context menu (marker) -->
  <div
    v-show="contextMenu.marker.show"
    class="fixed z-[9999] bg-base-100/95 backdrop-blur-xl shadow-xl rounded-lg border border-base-300 py-1 min-w-[180px] transition-opacity duration-150"
    :style="{ left: contextMenu.marker.x + 'px', top: contextMenu.marker.y + 'px' }"
  >
    <button
      type="button"
      class="btn btn-ghost btn-sm w-full justify-start hover:bg-base-200 transition-colors"
      @click="onHideMarker(contextMenu.marker.data?.id)"
    >
      Hide marker {{ contextMenu.marker.data?.name }}
    </button>
  </div>
  </Teleport>
</template>

<script setup lang="ts">
import type { ContextMenuState } from '~/composables/useMapLogic'

defineProps<{
  contextMenu: ContextMenuState
}>()

const emit = defineEmits<{
  wipeTile: [coords: { x: number; y: number } | undefined]
  rewriteCoords: [coords: { x: number; y: number } | undefined]
  hideMarker: [id: number | undefined]
}>()

function onWipeTile(coords: { x: number; y: number } | undefined) {
  if (coords) emit('wipeTile', coords)
}

function onRewriteCoords(coords: { x: number; y: number } | undefined) {
  if (coords) emit('rewriteCoords', coords)
}

function onHideMarker(id: number | undefined) {
  if (id != null) emit('hideMarker', id)
}
</script>
