<template>
  <div class="flex">
    <Tooltip :delay-duration="250" :disable-closing-trigger="true">
      <TooltipTrigger class="cursor-help" as-child>
        <span class="flex items-center mr-2 px-1">
          <CircleQuestionMark :size="18" opacity="0.25" />
        </span>
      </TooltipTrigger>
      <TooltipContent side="bottom" class="z-[2000]">Click to filter node types</TooltipContent>
    </Tooltip>
    <ToggleGroup type="multiple" class="gap-1" v-model="tracesStore.nodesFilters.group">
      <ToggleGroupItem value="agent" aria-label="Toggle Agent" class="px-4">
        <p class="block text-white bg-pink-300 rounded-sm text-center px-[6px]">A</p>
        Agent
      </ToggleGroupItem>
      <ToggleGroupItem value="guard" aria-label="Toggle Guard" class="px-4">
        <p class="block text-white bg-sky-300 rounded-sm text-center px-[6px]">G</p>
        Guard
      </ToggleGroupItem>
      <ToggleGroupItem value="tool" aria-label="Toggle Tool" class="px-4">
        <p class="block text-white bg-emerald-400 rounded-sm text-center px-[6px]">T</p>
        Tool
      </ToggleGroupItem>
      <ToggleGroupItem value="llm" aria-label="Toggle LLM" class="px-4">
        <p class="block text-white bg-blue-400 rounded-sm text-center px-[6px]">L</p>
        LLM
      </ToggleGroupItem>
      <ToggleGroupItem value="event" aria-label="Toggle Event" class="px-4">
        <p class="block text-white bg-orange-400 rounded-sm text-center px-[6px]">E</p>
        Event
      </ToggleGroupItem>
      <ToggleGroupItem value="span" aria-label="Toggle Call" class="px-4">
        <p class="block text-white bg-stone-300 rounded-sm text-center px-[6px]">C</p>
        Call
      </ToggleGroupItem>
    </ToggleGroup>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
import { useTracesStore } from '@/stores/traces'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { toast } from 'vue-sonner'
import { CircleQuestionMark } from 'lucide-vue-next'
// We use `call` in the UI only and span in the backend

const tracesStore = useTracesStore()

watch(
  () => tracesStore.nodesFilters.group,
  (newVal: string[], oldVal: string[]) => {
    const added = newVal.filter((item) => !oldVal.includes(item))
    const removed = oldVal.filter((item) => !newVal.includes(item))
    if (added.length) {
      toast.info(`Added terminal ${added[0] !== 'span' ? added[0] : 'call'} spans`, {
        duration: 900
      })
    }
    if (removed.length) {
      toast.info(`Removed terminal ${removed[0] !== 'span' ? removed[0] : 'call'} spans`, {
        duration: 900
      })
    }
  }
)
</script>
