<template>
  <div v-if="!tracesStore.selectedTraceId" class="flex items-center justify-center w-full h-full">
    <Alert class="max-w-[400px] rounded-md text-md">
      <CircleSlash2 />
      <AlertTitle>No node to display</AlertTitle>
      <AlertDescription>
        <div class="flex-col">
          <div>Try changing your filters or selecting a different trace</div>
        </div>
      </AlertDescription>
    </Alert>
  </div>

  <div
    v-else-if="!tracesStore.selectedTrace?.parentNode"
    class="flex items-center justify-center w-full h-full"
  >
    <Alert class="max-w-[400px] rounded-md text-md">
      <CircleSlash2 />
      <AlertTitle>No node found</AlertTitle>
      <AlertDescription>
        <div class="flex-col">
          <div>Try changing your filters or selecting a different trace</div>
          <div>or</div>
          <div class="underline cursor-pointer" @click="resetFilters">Reset View</div>
        </div>
      </AlertDescription>
    </Alert>
  </div>

  <template v-else>
    <div v-if="viewMode === ViewMode.Tree" class="h-full">
      <TreeView />
    </div>

    <div v-else-if="viewMode === ViewMode.Timeline" class="flex-1 pb-4">
      <TimelineView />
    </div>

    <ExplorerView v-else-if="viewMode === ViewMode.Explorer" />
  </template>

  <NodeExplorer v-if="tracesStore.selectedNode" />
</template>

<script setup lang="ts">
import { CircleSlash2 } from 'lucide-vue-next'

import { ViewMode } from '@/common/views'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import NodeExplorer from '@/components/NodeExplorer.vue'
import { useTracesStore } from '@/stores/traces'

import TreeView from './TreeView.vue'
import ExplorerView from './ExplorerView.vue'
import TimelineView from './TimelineView.vue'

const tracesStore = useTracesStore()
const viewMode = defineModel<ViewMode>()

function resetFilters() {
  tracesStore.resetNodeFilters()
}
</script>
