<script>
   import Api from "./api";
   import Credentials from "./Credentials.svelte";
   import Redirect from "./Redirect.svelte";
   import Twofactor from "./Twofactor.svelte";

   const appname = "OpenAuth";

   const states = {
      credentials: 1,
      twofactor: 3,
      redirect: 4
   }

   let username = Api.getUsername();
   let password = "";

   let loading = false;
   let state = states.credentials;

   function getButtonText(state) {
      switch (state) {
         case states.username:
            return "Next";
         case states.password:
            return "Login";
         default:
            return "";
      }
   }

   $: btnText = getButtonText(state);

   let error;

   // window.addEventListener("popstate", () => {
   //    state = history.state;
   // })


   function LoadRedirect() {
      state = states.redirect;
   }

   function Loading() {
      state = states.loading;
   }


   let salt;
   async function buttonClick() {
      if (state === states.username) {
         Loading()
         let res = await Api.setUsername(username);
         if (res.error) {
            error = res.error;
            LoadUsername();
         } else {
            LoadPassword();
         }

      } else if (state === states.password) {
         Loading();
         let res = await Api.setPassword(password);
         if (res.error) {
            error = res.error;
            LoadPassword();
         } else {
            if (res.tfa) {
               // TODO: Make TwoFactor UI/-s
            } else {
               LoadRedirect();
            }
         }
         btnText = "Error";
      }
   }

   function startRedirect() {
      state = states.redirect;
      // Show message to User and then redirect
      setTimeout(() => Api.finish(), 2000);
   }

   function afterCredentials() {
      Object.keys(Api); // Some weird bug needs this???

      if (Api.twofactor) {
         state = states.twofactor;
      } else {
         startRedirect();
      }
   }

   function afterTwoFactor() {
      startRedirect();
   }
</script>

<div class="form-container">
   <form action="JavaScript:void(0)" class="card">
      <div class="card title-container">
         <h1>Login</h1>
      </div>
      {#if loading}
      <div class="loader_container">
         <div class="loader_box">
            <div class="loader"></div>
         </div>
      </div>
      {/if}
      <div class="container" class:loading_container={loading}>
         {#if state === states.redirect}
            <Redirect/>
         {:else if state === states.credentials}
            <Credentials next={afterCredentials} setLoading={s => loading = s} />
         {:else if state === states.twofactor}
            <Twofactor finish={afterTwoFactor} setLoading={s => loading = s} />
         {/if}
      </div>
   </form>
</div>
<footer>
	<p>Powered by {appname}</p>
</footer>

<style>
      .card {
         box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
         background: #fafafa;
         border-radius: 4px;
      }
   
      .form-container {
         height: 100vh;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 1rem;
         box-sizing: border-box;
      }
   
      form {
         width: 100%;
         max-width: 380px;
         margin: 0 auto;
         box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
         position: relative;
         padding: 1px;
         background-color: white !important;
         margin-bottom: 40px; 
      }
   
   
      .container {
         overflow: hidden;
         padding: 2em;
      }
   
      button {
         margin-top: 16px;
      }

      footer {
         text-align: center;
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
      }
   
      .floating {
         margin-top: 8px;
      }
   
   
   
      h3 {
         font-weight: 200;
      }
   
      .title-container {
         margin: -30px auto 0 auto;
         max-width: 250px;
         background-color: var(--primary);
         color: white;
         padding: 5px 20px;
      }
   
      .loading_container {
         filter: blur(1px) opacity(50%);
   
      }
   
      .loader_container {
         position: absolute;
         display: flex;
         flex-direction: column;
         justify-content: center;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         z-index: 2;
      }
   </style>