<!--
// Copyright (c) 2022-2025 Niko Bonnieure, Par le Peuple, NextGraph.org developers
// All rights reserved.
// Licensed under the Apache License, Version 2.0
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
// at your option. All files in the project carrying such
// notice may not be copied, modified, or distributed except
// according to those terms.
-->
<script lang="ts">
  import { onMount } from "svelte";
  import { t, locale } from "svelte-i18n";
  import { CenteredLayout } from "@nextgraph-monorepo/common/lib";
  import { LogoSimple } from "@nextgraph-monorepo/common/components";
  import {
    Sidebar,
    SidebarGroup,
    SidebarItem,
    SidebarWrapper,
  } from "flowbite-svelte";
  import {
    ComputerDesktop,
    GlobeAlt,
    ServerStack
  } from "svelte-heros-v2";

  import { web_origin, brokers_info, selected_broker } from '../store';
  import { fromWritablePort, RemoteReadableStream } from 'remote-web-streams';

  let top;
  let nonActiveClass =
    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700";

  const AUTH_HOME = "#/";

  function select(broker: Object) {

    let url;
    if (import.meta.env.NG_DEV && broker.localhost === 14400) {
      // dev mode
      url = "http://localhost:1421/appauth.html";
    } else if (broker.localhost) {
      url = `http://localhost:${broker.localhost}/auth/`;
    } else if (broker.private) {
      //TODO
      url = `http://unimplemented/auth/`;
    } else if (broker.domain) {
      url = `https://${broker.domain}/auth/`;
    } else if (broker.ngbox) {
      url = `https://nextgraph.app/auth/`;
    } else return;

    selected_broker.set(broker);
    let iframe = window.document.getElementById("nextgraph-app-auth-iframe");
    iframe?.classList.add('nextgraph-app-auth-iframe--active');
    window.document.getElementById("app").style["display"] = "none";

    (<any>window).ng_iframe_origin = new URL(url).origin;

    iframe.addEventListener("load",  function() {
      
      (<any>window).ng_broker_selected = this.contentWindow;
      const ready_handler = async function(m) {
        if (m.data.ready && m.origin === (<any>window).ng_iframe_origin) {
          //console.log("got ready message",m);
          //remove this listener
          window.removeEventListener("message",ready_handler);
          const { readable, writablePort } = new RemoteReadableStream();
          //console.log("sending init message to app-auth");
          (<any>window).ng_broker_selected.postMessage({ method: "init", manifest:window.ng_manifest, port: writablePort }, (<any>window).ng_iframe_origin, [writablePort]);
          const reader = readable.getReader();
          for (var msg; msg = await reader.read(); ) {
            if (msg.done) {
              (<any>window).ng_status_callback.close();
              break;
            } else {
              //console.log("forwarding upstream",msg.value);
              (<any>window).ng_status_callback.write(msg.value);
            }
          }
        }
      };
      window.addEventListener("message",ready_handler);
    });

    iframe.src = url+"?o="+location.search.substring(3)+AUTH_HOME;
  }

  onMount(() => {
    if (Object.keys($brokers_info).length == 1) {
      select(Object.values($brokers_info)[0]);
    }
  });
</script>

{#if Object.keys($brokers_info).length > 1}
<CenteredLayout>
  <div class="container3" bind:this={top}>
    <div class="row">
      <LogoSimple/>
    </div>
    <div class="row mb-20">
      <Sidebar {nonActiveClass}>
        <SidebarWrapper
          divClass="bg-gray-60 overflow-y-auto py-4 px-3 rounded dark:bg-gray-800"
        >
          <SidebarGroup ulClass="space-y-2" role="menu">
            <li>
              <h2 class="text-xl mb-6">{@html $t("auth.select_broker", {values: { origin:$web_origin }})}</h2>
            </li>
            {#each Object.entries($brokers_info) as broker}
              <li
                tabindex="0"
                role="menuitem"
                class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
                on:keypress={()=>select(broker[1])}
                on:click={()=>select(broker[1])}
              >
                {#if broker[1].localhost}
                  <ComputerDesktop tabindex="-1"
                    class="w-10 h-10 mr-4 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"/>
                {:else if broker[1].domain}
                  <GlobeAlt tabindex="-1"
                    class="w-10 min-w-10 h-10 mr-4 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"/>
                {:else if broker[1].private}
                  <ServerStack tabindex="-1"
                    class="w-10 h-10 mr-4 text-black transition duration-75 focus:outline-none dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"/>
                {:else if broker[1].ngbox}
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    version="1.1"
                    viewBox="0 0 225 225"
                    class="mr-4 block h-10 w-10"
                    stroke="currentColor"
                    stroke-width="12"
                    fill="none"
                  >
                    <path
                      d="M 88.332599,179.77884 C 72.858008,177.42608 59.581081,170.564 48.8817,159.38898 36.800075,146.77026 30.396139,130.74266 30.396139,113.12381 c 0,-8.81477 1.466462,-16.772273 4.503812,-24.439156 3.697755,-9.333883 8.658122,-16.726264 15.988284,-23.827148 4.07992,-3.952299 5.699054,-5.267377 9.730928,-7.903581 10.263753,-6.710853 20.852276,-10.247623 32.861256,-10.976317 17.083161,-1.036581 33.737521,4.410501 47.100151,15.404873 1.30009,1.069669 2.35446,2.035155 2.34305,2.145524 -0.0114,0.110369 -3.32807,3.135042 -7.37038,6.721489 -4.04229,3.586437 -8.6667,7.731233 -10.27646,9.210635 -1.60975,1.479412 -3.05439,2.689839 -3.21032,2.689839 -0.15591,0 -1.2075,-0.642795 -2.33686,-1.428431 -6.49544,-4.518567 -13.79659,-6.747116 -22.104843,-6.747116 -10.982241,0 -20.054641,3.741852 -27.727158,11.435891 -5.517107,5.532575 -9.233107,12.555305 -10.782595,20.377588 -0.596045,3.00901 -0.594915,11.67153 0.0017,14.67182 3.195984,16.0665 15.801761,28.55358 31.607491,31.30987 3.592183,0.62643 10.334745,0.61437 13.792675,-0.0247 12.10383,-2.2368 22.30712,-9.80603 27.83192,-20.64689 0.66747,-1.30971 1.08703,-2.48825 0.93235,-2.61898 -0.1547,-0.13073 -5.9299,-1.01605 -12.83381,-1.96739 -8.43575,-1.16241 -12.87296,-1.9096 -13.52955,-2.27826 -1.31171,-0.73647 -2.44642,-2.49122 -2.44642,-3.78325 0,-1.012 1.74837,-13.68832 2.1486,-15.57814 0.25598,-1.20873 2.0923,-3.01339 3.3151,-3.25795 0.53677,-0.10735 7.61424,0.73799 15.7688,1.88346 8.13723,1.14303 14.89071,1.97925 15.00772,1.85826 0.11702,-0.12098 0.96445,-5.648553 1.88315,-12.283473 0.95557,-6.900944 1.90122,-12.59548 2.20977,-13.306594 0.29667,-0.683692 0.95765,-1.595052 1.46889,-2.025218 1.77972,-1.497534 2.7114,-1.539742 10.52745,-0.476938 8.31229,1.130266 9.2373,1.347581 10.59333,2.488613 1.41776,1.192951 1.96085,2.424677 1.94866,4.419342 -0.006,0.950347 -0.79507,7.156475 -1.75393,13.791395 -0.95885,6.634933 -1.70069,12.111623 -1.64854,12.170443 0.0522,0.0588 6.18174,0.95872 13.62132,1.99978 9.57969,1.34053 13.80866,2.0595 14.49353,2.46406 1.3199,0.77969 2.13943,2.28402 2.1135,3.87957 -0.0399,2.45278 -2.08103,15.63263 -2.5664,16.57122 -0.57073,1.10369 -2.24485,2.197 -3.38232,2.20889 -0.44831,0.004 -6.79249,-0.82755 -14.09817,-1.84941 -7.3057,-1.02186 -13.34942,-1.79161 -13.43049,-1.71053 -0.0811,0.0811 -1.02469,6.33285 -2.09694,13.89286 -1.24218,8.75802 -2.1547,14.1778 -2.51495,14.93697 -0.62565,1.31846 -2.38302,2.64205 -3.91461,2.94836 -0.8254,0.16509 -9.4024,-0.80047 -11.73007,-1.32049 -0.47193,-0.10544 -1.63157,0.58011 -3.8898,2.29957 -9.71515,7.39729 -20.99725,11.99799 -33.08692,13.49241 -3.79574,0.46921 -13.565667,0.37348 -17.125664,-0.16779 z"
                    />
                    <rect
                      ry="37.596001"
                      y="10.583322"
                      x="14.363095"
                      height="204.86308"
                      width="195.79167"
                    />
                  </svg>
                {/if}
                <span class="text-left text-xl ml-3" style="overflow-wrap: anywhere;">{broker[0]}</span>
              </li>
            {/each}
          </SidebarGroup>
        </SidebarWrapper>
      </Sidebar>
    </div>
  </div>
</CenteredLayout>
{/if}