<template>
  <bms-header class="header">
    <bms-menu :items="menuItems">
      <template #additional="{ closeMenu }">
        <div class="additional-container">
          <bms-tooltip tooltipText="text">
            <span @click="closeMenu">COUCOU</span>
          </bms-tooltip>
        </div>
      </template>
    </bms-menu>

    Sipa @bms/ui

    <bms-input-toggle
      :model-value="isDarkMode"
      @update:modelValue="toggleDarkMode"
      label="Dark mode"
      name="mode"
    />
  </bms-header>

  <BmsContentPageLayout>
    <router-view></router-view>
  </BmsContentPageLayout>

  <bms-notifications></bms-notifications>
  <bms-router-history></bms-router-history>
  <bms-confirm></bms-confirm>
  <bms-feature-flipper>
    <template #additional><BmsButton>TOTO</BmsButton></template>
  </bms-feature-flipper>
</template>

<script lang="ts" setup>
import { MenuItem, ParentMenuItem } from '@/models';
import { BmsButton } from '@/index';
import { Activity } from 'lucide-vue-next';
import BmsContentPageLayout from '@/components/layout/BmsContentPageLayout.vue';
import { useDarkMode } from '@/composables/dark-mode.composable';

const { isDarkMode, toggleDarkMode } = useDarkMode();

const menuItems: (MenuItem | ParentMenuItem)[] = [
  {
    label: 'Buttons / alerts / notifications',
    id: 'menu0',
    link: '/',
  },
  {
    label: 'Forms',
    link: '/forms',
    id: 'menu1',
  },
  {
    label: 'FilePicker',
    link: '/file-picker',
    id: 'menu1',
  },
  {
    label: 'Autocomplete',
    link: '/autocomplete',
    icon: Activity,
    id: 'menu2',
  },
  {
    label: 'Nouveau combobox',
    link: '/combobox',
    id: 'menu2',
  },
  {
    label: 'Tables',
    id: 'tables',
    items: [
      {
        label: 'Table',
        link: '/table',
        id: 'menu3',
      },
      {
        label: 'Server Table',
        link: '/server-table',
        id: 'menu4',
      },
    ],
  },
  {
    label: 'Stepper',
    link: '/stepper',
    id: 'menu5',
  },
  {
    label: 'Tabs',
    link: '/tabs',
    id: 'menuTabs',
  },
  {
    label: 'Paginated cards',
    link: '/paginated-cards',
    id: 'paginatedCards',
  },
  {
    label: 'Draggable list',
    link: '/draggable-list',
    id: 'draggableList',
  },
  {
    label: 'Formulaire asynchrone',
    link: '/loading-form',
    id: 'loadingForm',
  },
  {
    label: 'External Url',
    link: 'https://google.fr',
    id: 'menu7',
  },
];
</script>
<style lang="scss">
.header {
  display: flex;
  align-items: center;
  gap: 1em;
  height: var(--header-height);
}
</style>
