<template>
  <SKAdminLayout
    :favorite-items="favoriteItems"
    :favorites-config="favoritesConfig"
    :menu-items="menuItems"
    :system-title="systemTitle"
    :theme-toggle-label="themeToggleLabel"
    :logout-label="logoutLabel"
    :features="features"
    @logout="$emit('logout')"
    @select="$emit('select', $event)"
  >
    <slot />
  </SKAdminLayout>
</template>

<script setup lang="ts">
import type { AdminLayoutFavoritesConfig, AdminLayoutMenuItem } from './sk-admin-layout/types'
import { computed } from 'vue'
import SKAdminLayout from './SKAdminLayout.vue'

interface Props {
  systemTitle?: string
  themeToggleLabel?: string
  logoutLabel?: string
  favoriteHeaderLabel?: string
  favoriteItems?: AdminLayoutMenuItem[]
  menuItems?: AdminLayoutMenuItem[]
}

const props = withDefaults(defineProps<Props>(), {
  systemTitle: '管理系統',
  themeToggleLabel: '切換主題',
  logoutLabel: '登出',
  favoriteHeaderLabel: '我的最愛',
  favoriteItems: () => [],
  menuItems: () => [
      { title: '首頁', path: '/' },
      { title: '設定', path: '/settings' },
    ],
})

defineEmits<{
  logout: []
  select: [item: AdminLayoutMenuItem]
}>()

const features = {
  showThemeToggle: true,
  showFavorites: true,
  showBreadcrumb: false,
  showSearch: false,
  showToolbarActions: false,
  showUserInfo: false,
}

const favoritesConfig = computed<AdminLayoutFavoritesConfig>(() => ({
  label: props.favoriteHeaderLabel,
  addLabel: props.favoriteHeaderLabel,
  showAdd: false,
}))
</script>
