<script>
   import AccountPage from "./Pages/Account.svelte";
   import SecurityPage from "./Pages/Security.svelte";
   import {
      slide,
      fade
   } from 'svelte/transition';

   const pages = [{
         id: "account",
         title: "Account",
         icon: "",
         component: AccountPage
      },
      {
         id: "security",
         title: "Security",
         icon: "",
         component: SecurityPage
      }
   ];

   function getPage() {
      let pageid = window.location.hash.slice(1);
      return pages.find(e => e.id === pageid) || pages[0];
   }

   let page = getPage();
   window.addEventListener("hashchange", () => {
      page = getPage();
   })
   // $: title = pages.find(e => e.id === page).title;


   const mq = window.matchMedia("(min-width: 45rem)");
   let sidebar_button = !mq.matches;
   mq.addEventListener("change", (ev) => {
      sidebar_button = !ev.matches;
   })

   let sidebar_active = false;



   function setPage(pageid) {
      let pg = pages.find(e => e.id === pageid)
      if (!pg) {
         throw new Error("Invalid Page " + pageid);
      } else {
         let url = new URL(window.location.href);
         url.hash = pg.id;
         window.history.pushState({}, pg.title, url);
         page = getPage();
      }

      sidebar_active = false;
   }


   let loading = true;

   import NavigationBar from "./NavigationBar.svelte";
</script>
<div class:loading class="root">
   <div class="container">
      <div class="header">
         {#if sidebar_button}
         <button on:click={()=>sidebar_active = !sidebar_active}>
            <svg id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
         </button>
         {/if}
      <h1>{page.title}</h1>
      </div>
      <div class="sidebar" class:sidebar-visible={sidebar_active}>
         <NavigationBar open={setPage} pages={pages} />
      </div>
      <div class="content">
            <svelte:component this={page.component} bind:loading />
      </div>
      <div class="footer"></div>
   </div>
</div>

{#if loading}
<div class="loader_container">
   <div class="loader_box">
      <div class="loader"></div>
   </div>
</div>
{/if}

<style>
      .loading {
         background-color: rgba(0, 0, 0, 0.04);
         filter: blur(10px);
      }
   
      :root {
         --sidebar-width: 250px;
      }

      .root {
         height: 100%;
      }
   
      .container {
         display: grid;
         height: 100%;
         grid-template-columns: auto 100%;
         grid-template-rows: 60px auto 60px;
         grid-template-areas:
            "sidebar header"
            "sidebar mc"
            "sidebar footer"
      }
   
      .header {
         grid-area: header;
         background-color: var(--primary);
         padding: 12px;
         display: flex;
      }
   
      .header > h1 {
         margin: 0;
         padding: 0;
         font-size: 24px;
         line-height: 36px;
         color: white;
         margin-left: 2rem;
      }

      .header>button {
         height: 36px;
         background-color: transparent;
         border: none;
         font-size: 20px;
      }
   
      .header>button:hover {
         background-color: rgba(255, 255, 255, 0.151)
      }
   
      .sidebar {
         width: 0;
         overflow: hidden;
         grid-area: sidebar;
         transition: width .2s;
         background-color: lightgrey;
         height: 100%;
      }
   
      .sidebar-visible {
         width: var(--sidebar-width);
         transition: width .2s;
         box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
      }
   
      .content {
         grid-area: mc;
         padding: 1rem;
      }
   
      .footer {
         grid-area: footer;
      }
   
      @media (min-width: 45rem) {
         .container {
            grid-template-columns: auto 1fr;
         }

         .sidebar {
            width: var(--sidebar-width);
            transition: all .2s;
            box-shadow: 10px 0px 10px 2px rgba(0, 0, 0, 0.52);
         }

         .content {
            padding: 2rem;
         }
      }

      .loader_container {
         position: absolute;
         display: flex;
         flex-direction: column;
         justify-content: center;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         z-index: 2;
      }
   </style>