<template>
  <div class="flex h-15 items-center p-4 border-b-1">
    <div class="flex justify-between items-center w-full">
      <div class="flex flex-none items-center">
        <SidebarTrigger />
        <Separator orientation="vertical" class="mx-2 !h-[20px]" />
        <Breadcrumb class="ml-[5px]">
          <BreadcrumbList>
            <BreadcrumbItem class="hidden xl:block">Explore Dataiku LLM Mesh Traces</BreadcrumbItem>
            <BreadcrumbSeparator class="hidden xl:block" />
            <BreadcrumbItem>
              <BreadcrumbPage
                v-if="tracesStore.selectedTrace?.name"
                class="max-w-[250px] 2xl:max-w-[400px] truncate"
                >{{ tracesStore.selectedTrace?.name }}</BreadcrumbPage
              >
              <BreadcrumbPage v-else>No trace selected</BreadcrumbPage>
            </BreadcrumbItem>
            <Popover v-if="tracesStore.selectedTrace" v-model:open="popOpen">
              <PopoverTrigger as-child class="cursor-pointer text-xs">
                <div class="text-black">
                  <EllipsisVertical :size="16" />
                </div>
              </PopoverTrigger>
              <PopoverContent align="start" class="w-43 p-3">
                <div class="flex gap-2 cursor-pointer text-xs" @click="copyWholeTrace">
                  <Copy :size="16" />
                  <span>Copy the whole trace</span>
                </div>
              </PopoverContent>
            </Popover>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <ToggleGroup type="single" class="gap-1" :default-value="viewMode">
        <ToggleGroupItem value="tree" aria-label="Toggle Tree" @click="switchView(ViewMode.Tree)">
          <Waypoints />
          Tree
        </ToggleGroupItem>
        <ToggleGroupItem
          value="timeline"
          aria-label="Toggle timeline"
          @click="switchView(ViewMode.Timeline)"
        >
          <ChartGantt />
          Timeline
        </ToggleGroupItem>
        <ToggleGroupItem
          value="explorer"
          aria-label="Toggle explorer"
          @click="switchView(ViewMode.Explorer)"
        >
          <ListTree />
          Explorer
        </ToggleGroupItem>
      </ToggleGroup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ChartGantt, ListTree, Waypoints, EllipsisVertical, Copy } from 'lucide-vue-next'

import { ViewMode } from '@/common/views'
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbPage,
  BreadcrumbSeparator
} from '@/components/ui/breadcrumb'
import { Separator } from '@/components/ui/separator'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
import { useTracesStore } from '@/stores/traces'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { copyToClipboard } from '@/utils/clipboard'
import { ref } from 'vue'

const tracesStore = useTracesStore()
const viewMode = defineModel<ViewMode>()
const popOpen = ref(false)

function switchView(mode: ViewMode) {
  viewMode.value = mode
}

function copyWholeTrace() {
  if (!tracesStore.selectedTrace) return
  copyToClipboard(tracesStore.selectedTrace.parentNode)
  popOpen.value = false
}
</script>
