<template>
  <div>
    <div class="ml-1 mr-2" v-if="typeof props.nodeGrp === 'string'">
      <div v-if="props.nodeGrp === 'agent'">
        <div v-if="props.emptyNode" class="node-diamond">
          <div
            :data-grp="props.nodeGrp"
            class="node-avatar-empty border-2 border-dotted font-medium flex items-center justify-center select-none w-full h-full transform rotate-45"
          >
            <span :data-grp="nodeGrp" class="node-avatar-empty transform -rotate-45">
              {{ getInitial(nodeGrp) }}
            </span>
          </div>
        </div>
        <div v-else-if="!props.emptyNode" class="node-diamond">
          <div
            :data-grp="props.nodeGrp"
            class="node-avatar text-white font-medium flex items-center justify-center select-none w-full h-full transform rotate-45"
          >
            <span class="transform -rotate-45">
              {{ getInitial(props.nodeGrp) }}
            </span>
          </div>
        </div>
      </div>
      <div v-if="props.nodeGrp !== 'agent'">
        <span
          v-if="props.emptyNode"
          :data-grp="props.nodeGrp"
          class="node-avatar-empty flex font-semibold items-center justify-center w-5 h-5 rounded-full border-2 border-dotted bg-white"
          >{{ getInitial(props.nodeGrp) }}</span
        >
        <span
          v-else-if="!props.emptyNode"
          :data-grp="props.nodeGrp"
          class="node-avatar flex items-center justify-center rounded-full w-5 h-5 font-semibold text-white"
          >{{ getInitial(props.nodeGrp) }}</span
        >
      </div>
    </div>
    <!-- Main parent or empty displays nothing -->
    <div v-else class="ml-1 mr-2 h-5 w-5"></div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  nodeGrp: string | null
  emptyNode: boolean | undefined
}>()

function getInitial(name: string | null) {
  if (!name) {
    return ''
  }
  return name.trim()[0]?.toUpperCase() ?? 'U'
}
</script>
<style scoped lang="postcss">
.node-avatar {
  background: var(--grp-c);
}
.node-avatar[data-grp='agent'] {
  --grp-c: var(--color-agent);
}
.node-avatar[data-grp='guard'] {
  --grp-c: var(--color-guard);
}
.node-avatar[data-grp='tool'] {
  --grp-c: var(--color-tool);
}
.node-avatar[data-grp='llm'] {
  --grp-c: var(--color-llm);
}
.node-avatar[data-grp='event'] {
  --grp-c: var(--color-event);
}
.node-avatar[data-grp='span'] {
  --grp-c: var(--color-span);
}

.node-avatar-empty {
  border-color: var(--grp-c);
  color: var(--grp-c);
}
.node-avatar-empty[data-grp='agent'] {
  --grp-c: var(--color-agent);
}
.node-avatar-empty[data-grp='guard'] {
  --grp-c: var(--color-guard);
}
.node-avatar-empty[data-grp='tool'] {
  --grp-c: var(--color-tool);
}
.node-avatar-empty[data-grp='llm'] {
  --grp-c: var(--color-llm);
}
.node-avatar-empty[data-grp='event'] {
  --grp-c: var(--color-event);
}
.node-avatar-empty[data-grp='span'] {
  --grp-c: var(--color-span);
}

.node-diamond {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
