<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'
import type { GraphFxNodeData, GraphFxPort } from '../lib/graphfxToVueFlow'
import { getInputHandleId, getOutputHandleId } from '../lib/graphfxToVueFlow'

const props = defineProps<{
  data: GraphFxNodeData
}>()

function valuePreview(port: GraphFxPort) {
  if (port.output) return 'connected'
  if (port.value === null || port.value === undefined) return 'empty'
  if (typeof port.value === 'string') return port.value.length > 28 ? `${port.value.slice(0, 28)}…` : port.value
  if (typeof port.value === 'number' || typeof port.value === 'boolean') return String(port.value)
  if (typeof port.value === 'object') return 'object'
  return String(port.value)
}
</script>

<template>
  <article class="graphfx-node">
    <header class="graphfx-node__header">
      <p class="graphfx-node__kind">GraphFX</p>
      <h3>{{ data.name }}</h3>
      <small>{{ data.id }}</small>
    </header>

    <section class="graphfx-node__ports" :class="{ 'graphfx-node__ports--empty': !data.inputs.length && !data.outputs.length }">
      <div class="graphfx-node__column">
        <p class="graphfx-node__column-title">Inputs</p>
        <div v-if="!data.inputs.length" class="graphfx-node__empty">none</div>
        <div v-for="port in data.inputs" :key="port.name" class="graphfx-node__port graphfx-node__port--input">
          <Handle
            type="target"
            :id="getInputHandleId(data.id, port.name)"
            :position="Position.Left"
            class="graphfx-node__handle graphfx-node__handle--input"
          />
          <span class="graphfx-node__port-label">{{ port.label }}</span>
          <span class="graphfx-node__port-value" :title="String(port.value ?? '')">{{ valuePreview(port) }}</span>
        </div>
      </div>

      <div class="graphfx-node__column graphfx-node__column--outputs">
        <p class="graphfx-node__column-title">Outputs</p>
        <div v-if="!data.outputs.length" class="graphfx-node__empty">none</div>
        <div v-for="port in data.outputs" :key="port.name" class="graphfx-node__port graphfx-node__port--output">
          <span class="graphfx-node__port-label">{{ port.label }}</span>
          <Handle
            type="source"
            :id="getOutputHandleId(data.id, port.name)"
            :position="Position.Right"
            class="graphfx-node__handle graphfx-node__handle--output"
          />
        </div>
      </div>
    </section>
  </article>
</template>
