import { defineConfig } from 'vitepress';
import typedocSidebar from '../api/typedoc-sidebar.json';

function capitalizeFirstLetter(str: string) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

// NOTE: We can filter the generated sidebar to produce relevant links to documentation.
//       See the contents of the typedocSidear import for structure.
function classesOnlySidebar() {
  return typedocSidebar.map((rootItem) => {
    const srcItem = rootItem.items.find(
      (childItem) => childItem.text === 'src'
    );

    const classes = srcItem?.items.find(
      (childItem) => childItem.text === 'Classes'
    );

    return {
      ...rootItem,
      text: capitalizeFirstLetter(rootItem.text),
      items: classes?.items,
    };
  });
}


// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: 'Documentation',
  description: 'Documentation and guide for the XO Stack',
  themeConfig: {
    // Set the logo
    logo: {
      light: '/logo-light.svg',
      dark: '/logo-dark.svg',
    },

    // Enable search functionality.
    search: {
      provider: 'local',
    },

    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Tools', link: '/tools' },
    ],

    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Quick Start', link: '/markdown-examples' },
          { text: 'Best Practices', link: '/api-examples' },
        ],
      },
      {
        text: 'Frameworks',
        items: [
          { text: 'Vue', link: '/frameworks/vue' },
          { text: 'React', link: '/frameworks/react' },
          { text: 'Svelte', link: '/frameworks/svelte' },
        ],
      },
      {
        text: 'API',
        // NOTE: In future, we may want to manually specify API items in the sidebar.
        //       This would allow us to keep some experimental things undocumented.
        //       But, for now, let's use an autogenerated sidebar so that we don't have to maintain this.
        //       We can polish it later.
        items: classesOnlySidebar(),
      },
    ],

    socialLinks: [
      { icon: 'github', link: 'https://gitlab.com/GeneralProtocols/xo/stack' },
    ],

    // This is the outline on the right-hand side of the page.
    outline: {
      level: [2, 3],
      label: 'On this page',
    },
  },

    head: [['link', { rel: 'icon', href: '/favicon.png' }]]
  
});