<script setup lang="ts">
import { computed } from 'vue'
import { useDisplay } from 'vuetify'
import type { ViewMode } from '@/types'

const props = defineProps<{
  searchQuery: string
  viewMode: ViewMode
  isLoading: boolean
}>()

const emit = defineEmits<{
  'update:searchQuery': [value: string]
  'update:viewMode': [value: ViewMode]
  'toggle-sidebar': []
  'refresh': []
  'open-file-picker': []
  'open-folder-picker': []
  'new-folder': []
}>()

const display = useDisplay()
const isMobile = computed(() => display.mdAndDown.value)

const searchModel = computed({
  get: () => props.searchQuery,
  set: (value: string) => emit('update:searchQuery', value)
})

const viewModeModel = computed({
  get: () => props.viewMode,
  set: (value: ViewMode) => emit('update:viewMode', value)
})
</script>

<template>
  <v-app-bar elevation="0" density="compact" class="files-toolbar">
    <template #prepend>
      <v-app-bar-nav-icon
        v-if="isMobile"
        @click="emit('toggle-sidebar')"
      />
    </template>

    <v-app-bar-title>Files</v-app-bar-title>

    <v-spacer />

    <!-- Search -->
    <v-text-field
      v-model="searchModel"
      density="compact"
      variant="outlined"
      placeholder="Search files..."
      prepend-inner-icon="mdi-magnify"
      hide-details
      single-line
      class="files-toolbar-search mx-4"
    />

    <!-- View toggle -->
    <v-btn-toggle
      v-model="viewModeModel"
      color="primary"
      variant="outlined"
      density="compact"
      mandatory
      class="mr-2"
    >
      <v-btn value="grid" size="small">
        <v-icon>mdi-view-grid</v-icon>
      </v-btn>
      <v-btn value="list" size="small">
        <v-icon>mdi-view-list</v-icon>
      </v-btn>
      <v-btn value="details" size="small">
        <v-icon>mdi-view-headline</v-icon>
      </v-btn>
    </v-btn-toggle>

    <template #append>
      <v-btn
        icon="mdi-refresh"
        variant="text"
        @click="emit('refresh')"
        :loading="isLoading"
      />
      <v-menu>
        <template #activator="{ props: menuProps }">
          <v-btn
            color="secondary"
            variant="tonal"
            class="mr-2"
            v-bind="menuProps"
          >
            <v-icon start>mdi-upload</v-icon>
            <span class="d-none d-sm-inline">Upload</span>
            <v-icon end size="small">mdi-chevron-down</v-icon>
          </v-btn>
        </template>
        <v-list density="compact">
          <v-list-item @click="emit('open-file-picker')">
            <template #prepend>
              <v-icon>mdi-file-upload</v-icon>
            </template>
            <v-list-item-title>Upload Files</v-list-item-title>
          </v-list-item>
          <v-list-item @click="emit('open-folder-picker')">
            <template #prepend>
              <v-icon>mdi-folder-upload</v-icon>
            </template>
            <v-list-item-title>Upload Folder</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
      <v-btn
        color="primary"
        variant="elevated"
        @click="emit('new-folder')"
      >
        <v-icon start>mdi-folder-plus</v-icon>
        <span class="d-none d-sm-inline">New Folder</span>
      </v-btn>
    </template>
  </v-app-bar>
</template>

<style scoped>
.files-toolbar {
  border-bottom: 1px solid rgb(var(--v-border-color)) !important;
}

@media (max-width: 960px) {
  .files-toolbar-search {
    max-width: 180px;
    margin-inline: 8px !important;
  }
}

.files-toolbar-search {
  max-width: 300px;
}
</style>
