<script>
  import { onMount } from 'svelte';
  import Sidebar from "$/client/components/Sidebar.svelte";
  import IconFinder from "$/admin/bando/IconFinder.svelte";
  import Djenterator from "$/admin/bando/Djenterator.svelte";
  import Layout from "$/client/Layout.svelte";
  import HTML from "$/client/components/HTML.svelte";
  import { replace } from "svelte-spa-router";

  export let params={what: "intro"};

  let panels = [
    {url: "intro", title: "Introduction", active: true, icon: "list-start", html: "/docs/api/index.html"},
    {url: "quick", title: "Quick Start", active: false, icon: "baby", html: "/docs/quick-start/index.html"},
    {url: "long", title: "Long Start", active: false, icon: "rocket", html: "/docs/long-start/index.html"},
    {url: "howto", title: "HOWTO Recipes", active: false, icon: "cake", href: "/docs/howto/"},
    {url: "tips-tricks", title: "Tips & Tricks", active: false, icon: "bomb", html: "/docs/tips-tricks/"},
    {url: "docs", title: "API Docs", active: false, icon: "book", href: "/client/#/docs/"},
    {url: "demos", title: "Demos", active: false, icon: "component", href: "/client/#/bando/components/"},
    {url: "icons", title: "Icons", active: false, icon: "smile", component: IconFinder, props: {}}
  ];

  let selected = panels[0];

  const sidebar_select = (event) => {
    const { index, item } = event.detail;

    selected = item;

    replace(`/${ selected.url }/`);

    panels = panels.map((x, i) => {
      x.active = i == index;
      return x;
    });
  }

  const url_select = (url) => {
    let found = panels[0];

    for(let panel of panels) {
      if(url === panel.url) {
        found = panel;
      } else {
        panel.active = false;
      }
    }

    selected = found;
    selected.active = true;
    panels = panels;
  }

  $:if(selected && params.what && params.what != selected.url) {
    url_select(params.what);
  }

  onMount(() => {
    url_select(params.what);
  });

</script>

<style>
  content > right {
    flex-direction: column;
    padding: 0.5rem;
    min-height: calc(100vh - var(--fixed-header-height));
    max-height: calc(100vh - var(--fixed-header-height));
    height: calc(100vh - var(--fixed-header-height));
    overflow-y: auto;
    width: unset;
  }

  content > left {
    display: flex;
    max-width: min-content;
    min-width: min-content;
    width: min-content;
    min-height: calc(100vh - var(--fixed-header-height));
    max-height: calc(100vh - var(--fixed-header-height));
    height: calc(100vh - var(--fixed-header-height));
  }

  content {
    padding: 0px !important;
  }

  :global(a.howto b) {
    background-color: var(--color-info);
    color: var(--color);
    margin-bottom: 25px;
  }

  @media only screen and (max-width: 600px) {
    content {
      flex-direction: column;
    }

    content > right,
    content > left {
      max-width: 100%;
      min-width: 100%;
      width: 100%;
      max-height: min-content;
      min-height: min-content;
      height: min-content;
      overflow-y: initial;
    }
  }

</style>

<Layout fullwidth={ true } fixed={ true } footer={false} auth_optional={ true } testid="home-page">
  <content>
    <left>
      <Sidebar on:select={ sidebar_select } menu={ panels }>
        <div slot="top">
          <h3>Documentation</h3>
        </div>
      </Sidebar>
    </left>

    <right>
      {#if selected.component}
        <svelte:component this={ selected.component} {...selected.props }/>
      {:else if selected.html}
        <HTML url={ selected.html }/>
      {:else}
        <h1>Invalid Properties in Sidebar</h1>
      {/if}
    </right>
  </content>
</Layout>
