<script setup>
import { computed, onBeforeUnmount, ref, watch } from "vue";
import { Icon } from "@iconify/vue";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../../../ui/tooltip";
import { injectReorderContext } from "../../../utils/reorder";
defineOptions({ name: "ShwfedTableDragHandleRendererRuntime" });
const props = defineProps({
  column: { type: null, required: true },
  ctx: { type: Object, required: true }
});
const reorder = injectReorderContext();
const enabled = computed(() => reorder?.enabled.value ?? false);
const reason = computed(() => reorder?.disabledReason.value ?? null);
const gripRef = ref(null);
watch(
  [() => props.ctx.row.id, gripRef, enabled],
  ([rowId, el, isEnabled], [prevRowId]) => {
    if (!reorder) return;
    if (prevRowId && prevRowId !== rowId) {
      reorder.registerHandle(prevRowId, null);
    }
    reorder.registerHandle(rowId, isEnabled ? el : null);
  },
  { immediate: true, flush: "post" }
);
onBeforeUnmount(() => {
  if (!reorder) return;
  reorder.registerHandle(props.ctx.row.id, null);
});
</script>

<template>
  <div class="flex items-center justify-center w-full h-full">
    <Tooltip
      v-if="!enabled && reason"
      :delay-duration="400"
    >
      <TooltipTrigger as-child>
        <span
          class="inline-flex items-center justify-center size-6 text-zinc-300 cursor-not-allowed select-none"
          aria-disabled="true"
        >
          <Icon
            icon="fluent:re-order-dots-vertical-20-regular"
            class="size-4"
          />
        </span>
      </TooltipTrigger>
      <TooltipContent>
        {{ reason }}
      </TooltipContent>
    </Tooltip>
    <span
      v-else
      ref="gripRef"
      :class="[
  'inline-flex items-center justify-center size-6 select-none',
  enabled ? 'text-zinc-400 hover:text-zinc-600 cursor-grab active:cursor-grabbing' : 'text-zinc-300 cursor-not-allowed'
]"
      :aria-disabled="!enabled || void 0"
    >
      <Icon
        icon="fluent:re-order-dots-vertical-20-regular"
        class="size-4"
      />
    </span>
  </div>
</template>
