<template>
  <div
    class="d-flex align-center px-2 py-1 shrink-0 terminal-tab-bar"
  >
    <div class="d-flex align-center ga-1 overflow-x-auto flex-grow-1">
      <v-chip
        v-for="tab in sessions"
        :key="tab.id"
        :variant="tab.id === activeSessionId ? 'flat' : 'outlined'"
        :color="tab.id === activeSessionId ? 'primary' : 'default'"
        size="small"
        label
        class="cursor-pointer"
        @click="$emit('switch', tab.id)"
      >
        <template #prepend>
          <v-icon
            size="8"
            :color="
              tab.status === 'connected'
                ? 'success'
                : tab.status === 'connecting' || tab.status === 'idle'
                  ? 'warning'
                  : tab.status === 'error'
                    ? 'error'
                    : 'grey'
            "
          >
            mdi-circle
          </v-icon>
        </template>
        <span class="text-truncate terminal-tab-bar__title">{{ tab.serverName }}</span>
        <v-icon end size="12" class="ml-1" @click.stop="$emit('close', tab.id)">mdi-close</v-icon>
      </v-chip>
      <v-btn size="small" variant="tonal" prepend-icon="mdi-plus" @click="$emit('new')">
        新建会话
      </v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TermSessionData } from '@/composables/terminal/types'

defineProps<{
  sessions: TermSessionData[]
  activeSessionId: string
}>()

defineEmits<{
  switch: [sessionId: string]
  close: [sessionId: string]
  new: []
}>()
</script>

<style scoped>
.terminal-tab-bar {
  background: rgb(var(--v-theme-surface));
  border-bottom: 1px solid rgb(var(--v-theme-surface-variant));
}
.terminal-tab-bar__title {
  max-width: 100px;
}
.cursor-pointer {
  cursor: pointer;
}
</style>
