<!--
// Copyright (c) 2022-2023 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, onDestroy } from "svelte";
  import { link, push } from "svelte-spa-router";
  import Login from "../lib/Login.svelte";
  import ng from "../api";
  // @ts-ignore
  import Logo from "../assets/nextgraph.svg?component";
  import {
    wallets,
    active_wallet,
    opened_wallets,
    active_session,
    set_active_session,
    has_wallets,
  } from "../store";
  let wallet;
  let selected; //= "8Hg1Rf7us3LFhs7HCbxCQOWJoV-OUyALbTuSaKp7D-M";
  let step;

  let wallets_unsub;
  let opened_wallets_unsub;
  let active_wallet_unsub;

  function convert_img_to_url(buffer) {
    var blob = new Blob([buffer], {
      type: "image/jpeg",
    });
    var imageUrl = URL.createObjectURL(blob);
    return imageUrl;
  }

  onMount(async () => {
    step = "open";
    wallets_unsub = wallets.subscribe((value) => {
      wallet = selected && $wallets[selected]?.wallet;
      console.log("wallet found locally", wallet);
    });
    opened_wallets_unsub = opened_wallets.subscribe(async (value) => {
      if (!$active_wallet && selected && value[selected]) {
        active_wallet.set({ wallet: value[selected], id: selected });
      }
    });
    active_wallet_unsub = active_wallet.subscribe(async (value) => {
      if (value && value.wallet) {
        if (!$active_session) {
          let session = await ng.get_local_session(
            value.id,
            value.wallet.V0.wallet_privkey,
            value.wallet.V0.personal_site
          );
          console.log(session);
          if (session) {
            set_active_session(session);
            loggedin();
          }
        }
      }
    });
  });
  function loggedin() {
    step = "loggedin";
    push("#/");
  }
  onDestroy(() => {
    if (wallets_unsub) wallets_unsub();
    if (opened_wallets_unsub) opened_wallets_unsub();
    if (active_wallet_unsub) active_wallet_unsub();
  });
  async function gotError(event) {
    console.error(event.detail);
  }
  async function gotWallet(event) {
    console.log(event.detail);
    active_wallet.set(event.detail);
    // wallet
    // id
  }
  function cancelLogin(event) {
    selected = undefined;
    wallet = undefined;
  }
  function select(id) {
    selected = id;
    if ($opened_wallets[selected]) {
      active_wallet.set({ wallet: $opened_wallets[selected], id: selected });
    } else {
      wallet = $wallets[selected]?.wallet;
    }
  }
</script>

{#if wallet}
  <Login
    {wallet}
    on:error={gotError}
    on:opened={gotWallet}
    on:cancel={cancelLogin}
  />
{:else if !$active_wallet && !selected}
  <main class="">
    <div class="row">
      <Logo class="logo block h-40" alt="NextGraph Logo" />
    </div>
    <h2 class="pb-5 text-xl">Select a wallet for log in</h2>
    <div class="flex flex-wrap justify-center gap-5 mb-20">
      {#each Object.entries($wallets) as wallet_entry}
        <div
          class="wallet-box"
          role="button"
          tabindex="0"
          title={wallet_entry[0]}
          on:click={() => {
            select(wallet_entry[0]);
          }}
          on:keypress={() => {
            select(wallet_entry[0]);
          }}
        >
          <span class="securitytxt"
            >{wallet_entry[1].wallet.V0.content.security_txt}
            {wallet_entry[0]}</span
          >
          <img
            alt={wallet_entry[1].wallet.V0.content.security_txt}
            class="securityimg"
            src={convert_img_to_url(
              wallet_entry[1].wallet.V0.content.security_img
            )}
          />
        </div>
      {/each}
      <div class="wallet-box">
        {#if $has_wallets}<p class="mt-1">Log in with another wallet</p>
        {:else}<p class="mt-1">Import your wallet</p>
        {/if}
        <button
          class=" mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2"
        >
          <svg
            class="w-8 h-8 mr-2 -ml-1"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15M9 12l3 3m0 0l3-3m-3 3V2.25"
            />
          </svg>
          Import a Wallet File
        </button>
        <button
          class="mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2"
        >
          <svg
            class="w-8 h-8 mr-2 -ml-1"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z"
            />
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6.75 6.75h.75v.75h-.75v-.75zM6.75 16.5h.75v.75h-.75v-.75zM16.5 6.75h.75v.75h-.75v-.75zM13.5 13.5h.75v.75h-.75v-.75zM13.5 19.5h.75v.75h-.75v-.75zM19.5 13.5h.75v.75h-.75v-.75zM19.5 19.5h.75v.75h-.75v-.75zM16.5 16.5h.75v.75h-.75v-.75z"
            />
          </svg>
          Import with QRcode
        </button>
        <button
          class="mt-1 text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2"
        >
          <svg
            class="w-8 h-8 mr-2 -ml-1"
            fill="none"
            stroke="currentColor"
            stroke-width="1.5"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
            />
          </svg>

          Enter a Wallet Link
        </button>
        <a href="/wallet/create" use:link>
          <button
            tabindex="-1"
            class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:outline-none focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
          >
            <svg
              class="w-8 h-8 mr-2 -ml-1"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
              aria-hidden="true"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"
              />
            </svg>
            Create a new wallet
          </button>
        </a>
      </div>
    </div>
  </main>
{:else if step == "security"}{:else if step == "qrcode"}{:else if step == "drop"}{:else if step == "cloud"}{:else if step == "loggedin"}you
  are logged in{/if}

<style>
  .wallet-box {
    width: 300px;
    height: 300px;
    background-color: white;
    position: relative;
    cursor: pointer;
  }
  button {
    min-width: 250px;
  }
  .securitytxt {
    z-index: 100;
    width: 300px;
    position: absolute;
    left: 0;
    padding: 5px;
    background-color: #ffffff70;
    overflow-wrap: break-word;
  }
  .wallet-box:focus .securitytxt {
    background-color: #ffffffff;
  }
  .securityimg {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>
