<template>
  <aside v-if="mode === 'sidebar'" class="terminal-server-rail d-flex flex-column h-100">
    <div class="terminal-server-rail__head px-3 py-2 text-subtitle-2 font-weight-medium border-b">
      服务器
      <span class="text-caption text-medium-emphasis ml-1">({{ servers.length }})</span>
    </div>
    <div class="terminal-server-rail__search px-2 pt-2 pb-1">
      <PickerSearch
        :search="search"
        :search-history="searchHistory"
        @update:search="$emit('update:search', $event)"
        @search-commit="$emit('search-commit')"
      />
    </div>
    <v-skeleton-loader v-if="loading" type="list-item@8" class="px-2 pt-1" />
    <v-list v-else density="compact" nav class="terminal-server-rail__list flex-grow-1 py-0 px-2">
      <PickerListItems :servers="servers" @select="$emit('select', $event)" />
    </v-list>
  </aside>

  <v-card v-else-if="mode === 'inline'" border rounded="lg" class="empty-server-picker" max-width="520" width="100%">
    <v-card-text class="pa-3">
      <PickerSearch
        :search="search"
        :search-history="searchHistory"
        @update:search="$emit('update:search', $event)"
        @search-commit="$emit('search-commit')"
      />
      <v-skeleton-loader v-if="loading" type="list-item@6" class="mb-2" />
      <v-list v-else density="compact" class="empty-server-picker__list" nav>
        <PickerListItems :servers="servers" @select="$emit('select', $event)" />
      </v-list>
    </v-card-text>
  </v-card>

  <template v-else>
    <PickerSearch
      :search="search"
      :search-history="searchHistory"
      class="mb-3"
      @update:search="$emit('update:search', $event)"
      @search-commit="$emit('search-commit')"
    />
    <v-skeleton-loader v-if="loading" type="list-item@6" class="mb-2" />
    <v-list v-else density="compact" max-height="300" style="overflow-y: auto">
      <PickerListItems :servers="servers" @select="$emit('select', $event)" />
    </v-list>
  </template>
</template>

<script setup lang="ts">
import PickerListItems from '@/components/terminal/TerminalServerPickerList.vue'
import PickerSearch from '@/components/terminal/TerminalServerPickerSearch.vue'
import type { TerminalServerItem } from '@/composables/terminal/types'

withDefaults(
  defineProps<{
    servers: TerminalServerItem[]
    search?: string
    searchHistory?: string[]
    loading?: boolean
    mode?: 'inline' | 'dialog' | 'sidebar'
  }>(),
  { mode: 'inline', loading: false, search: '', searchHistory: () => [] },
)

defineEmits<{
  'update:search': [value: string | null]
  'search-commit': []
  select: [serverId: number]
}>()
</script>

<style scoped>
.empty-server-picker__list {
  max-height: min(42vh, 320px);
  overflow-y: auto;
}
.terminal-server-rail {
  width: 300px;
  flex-shrink: 0;
  min-height: 0;
  background: rgb(var(--v-theme-surface));
  border-left: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}
.terminal-server-rail__list {
  overflow-y: auto;
  min-height: 0;
}
</style>
