<script setup>
import { computed } from "vue";
import { Icon } from "@iconify/vue";
import { Effect } from "effect";
import { cel as $cel } from "../../../../../utils/cel";
import { Button } from "../../../../ui/button";
import { JUSTIFY_CLASS } from "../../../utils/runtime";
import { celBindings, injectCELContext } from "../../../../../utils/cel-context";
defineOptions({ name: "ShwfedTableTextRendererRuntime" });
const props = defineProps({
  column: { type: null, required: true },
  ctx: { type: Object, required: true }
});
const celContext = injectCELContext();
const rawValue = computed(() => props.ctx.cell.getValue());
const isMissing = computed(() => rawValue.value === void 0 || rawValue.value === null);
const align = computed(() => isMissing.value ? "center" : props.column.align ?? "left");
const justifyClass = computed(() => JUSTIFY_CLASS[align.value] ?? JUSTIFY_CLASS.left);
const copyText = computed(() => {
  const { copyExpression } = props.column;
  if (!copyExpression) return void 0;
  try {
    const value = Effect.runSync($cel(copyExpression, celBindings(celContext)));
    return value === void 0 || value === null ? void 0 : String(value);
  } catch (e) {
    console.error("[shwfed-table] text copy expression failed", e);
    return void 0;
  }
});
const showCopy = computed(() => copyText.value !== void 0 && !isMissing.value && rawValue.value !== "");
const onCopy = async () => {
  const text = copyText.value;
  if (text === void 0) return;
  try {
    await navigator.clipboard.writeText(text);
  } catch (e) {
    console.error("[shwfed-table] text copy failed", e);
  }
};
</script>

<template>
  <span
    :class="[
  'relative w-full py-2 px-1 flex items-center text-xs group',
  justifyClass,
  isMissing ? 'font-mono text-zinc-300 select-none' : [column.displayMode === 'mono' && 'font-mono', 'text-zinc-600']
]"
  >
    <span class="min-w-0 truncate">
      {{ isMissing ? "-" : String(rawValue) }}
    </span>
    <Button
      v-if="showCopy"
      aria-label="Copy"
      class="p-1 w-6 h-6 flex items-center justify-center right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-0 absolute transition-opacity duration-180"
      size="xs"
      @click="onCopy"
    >
      <Icon icon="fluent:copy-20-regular" />
    </Button>
  </span>
</template>
