<template>
  <v-col
    v-if="features.showFavorites && showFavoritesBar && !isMobile"
    class="d-flex align-center pr-2 pl-3 py-1 bg-surface"
  >
    <div class="favorites-label text-body-2 text-no-wrap pe-2">
      {{ favoritesConfig.label }}
    </div>
    <div class="favorites-list flex-grow-1 d-flex flex-wrap ga-2">
      <transition-group class="d-flex flex-wrap ga-2" name="favorite-list" tag="div">
        <v-chip
          v-for="item in favoriteItems"
          :key="item.path ?? item.title"
          class="favorite-item"
          closable
          color="secondary"
          size="small"
          variant="outlined"
          @click="emit('select', item)"
          @click:close="emit('remove-favorite', item)"
        >
          <v-icon v-if="item.icon" class="me-1" size="16" :icon="item.icon" />
          <span class="text-caption">{{ item.title }}</span>
        </v-chip>
      </transition-group>
      <v-btn
        v-if="favoritesConfig.showAdd"
        class="favorite-add"
        color="primary"
        size="small"
        variant="outlined"
        @click="emit('add-favorite')"
      >
        <v-icon class="mr-1" size="16" :icon="mdiPlus" />
        <span class="text-caption">{{ favoritesConfig.addLabel }}</span>
      </v-btn>
    </div>
    <v-btn color="grey" size="small" variant="text" @click="emit('toggle-favorites-bar', false)">
      <v-icon :icon="mdiEyeOff" />
    </v-btn>
  </v-col>
</template>

<script setup lang="ts">
import type { AdminLayoutFavoritesConfig, AdminLayoutFeatures, AdminLayoutMenuItem } from './types'
import { mdiEyeOff, mdiPlus } from '@mdi/js'

interface Props {
  features?: AdminLayoutFeatures
  showFavoritesBar?: boolean
  isMobile?: boolean
  favoritesConfig?: AdminLayoutFavoritesConfig
  favoriteItems?: AdminLayoutMenuItem[]
}

withDefaults(defineProps<Props>(), {
  features: () => ({
    showThemeToggle: false,
    showFavorites: true,
    showBreadcrumb: true,
    showSearch: true,
    showToolbarActions: true,
    showUserInfo: true,
  }),
  showFavoritesBar: true,
  isMobile: false,
  favoritesConfig: () => ({
    label: '',
    addLabel: '',
    showAdd: false,
  }),
  favoriteItems: () => [],
})

const emit = defineEmits<{
  select: [item: AdminLayoutMenuItem]
  'add-favorite': []
  'remove-favorite': [item: AdminLayoutMenuItem]
  'toggle-favorites-bar': [value: boolean]
}>()
</script>

<style scoped>
.favorite-item {
  text-transform: none;
}

.favorite-list-enter-active,
.favorite-list-leave-active,
.favorite-list-move {
  transition: all 0.2s ease;
}

.favorite-list-enter-from,
.favorite-list-leave-to {
  opacity: 0;
  transform: scale(0.92);
}
</style>
