<template>
  <div class="d-flex align-center justify-space-between px-4 py-1 shrink-0 terminal-toolbar">
    <div class="d-flex align-center ga-3">
      <span class="text-body-2 font-weight-medium">{{ session?.serverName || '...' }}</span>
      <span
        v-if="session?.cwd"
        class="text-caption text-medium-emphasis font-mono terminal-toolbar__cwd"
      >
        {{ session.cwd }}
      </span>
      <v-chip v-if="session" :color="statusColor" variant="tonal" size="x-small" label>
        <template #prepend>
          <v-icon start size="8">mdi-circle</v-icon>
        </template>
        {{ statusLabel }}
      </v-chip>
      <span v-if="session?.uptime" class="text-caption text-medium-emphasis">{{ session.uptime }}</span>
      <span
        v-if="session?.pingMs !== null && session?.pingMs !== undefined"
        class="text-caption text-medium-emphasis"
      >
        {{ session.pingMs }}ms
      </span>
    </div>
    <div class="d-flex align-center ga-2 terminal-toolbar-actions">
      <span class="text-body-2 text-medium-emphasis shrink-0">字号</span>
      <v-btn variant="tonal" size="small" @click="$emit('font-change', -1)">缩小</v-btn>
      <span class="text-body-2 font-weight-medium terminal-toolbar__font-size">{{ fontSize }}</span>
      <v-btn variant="tonal" size="small" @click="$emit('font-change', 1)">放大</v-btn>
      <v-select
        :model-value="scrollback"
        :items="scrollbackOptions"
        item-title="title"
        item-value="value"
        label="回滚行数"
        density="comfortable"
        hide-details
        variant="outlined"
        class="terminal-toolbar-scrollback"
        @update:model-value="$emit('scrollback-change', $event)"
      />
      <v-btn variant="tonal" size="small" prepend-icon="mdi-fullscreen" @click="$emit('fullscreen')">
        全屏
      </v-btn>
      <v-btn
        variant="tonal"
        size="small"
        color="error"
        prepend-icon="mdi-link-off"
        @click="$emit('disconnect')"
      >
        断开
      </v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  sessionStatusColor,
  sessionStatusLabel,
  type TermSessionData,
} from '@/composables/terminal/types'
import { scrollbackOptions } from '@/composables/terminal/useTerminalSettings'

const props = defineProps<{
  session: TermSessionData | null
  fontSize: number
  scrollback: number
}>()

defineEmits<{
  'font-change': [delta: number]
  'scrollback-change': [value: number]
  fullscreen: []
  disconnect: []
}>()

const statusLabel = computed(() =>
  props.session ? sessionStatusLabel(props.session) : '',
)
const statusColor = computed(() =>
  props.session ? sessionStatusColor(props.session) : 'grey',
)
</script>

<style scoped>
.terminal-toolbar {
  background: rgb(var(--v-theme-surface));
  border-bottom: 1px solid rgb(var(--v-theme-surface-variant));
  min-height: 32px;
}
.terminal-toolbar__cwd {
  max-width: 200px;
}
.terminal-toolbar__font-size {
  min-width: 1.5rem;
  text-align: center;
}
.terminal-toolbar-scrollback {
  min-width: 8.5rem;
  max-width: 10rem;
}
.font-mono {
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Menlo, monospace;
}
</style>
