<script>
   import Box from "./Box.svelte";
   import BoxItem from "./BoxItem.svelte";
   import NextIcon from "./NextIcon.svelte";

   import request from "../../request"

   export let loading = false;
   let error = undefined;


   const genderMap = new Map();
   genderMap.set(0, "None");
   genderMap.set(1, "Male");
   genderMap.set(2, "Female");
   genderMap.set(3, "Other");

   let name = "";
   let gender = 0;
   $: genderHuman = genderMap.get(gender) || "ERROR";
   let birthday = undefined;

   async function saveName() {
      //TODO: implement
      await load();
   }

   async function saveGender() {
      //TODO: implement
      await load();
   }

   async function loadProfile() {
      try {
         let {
            user
         } = await request("/api/user/account", {}, "GET", undefined, true)

         name = user.name;
         // username = user.username;
         gender = user.gender;
         birthday = user.birthday ? new Date(user.birthday).toLocaleDateString() : undefined;
      } catch (err) {
         console.error(err);
         error = err.message;
      }
   }


   let email = ["mail@fabianstamm.de", "fabian.stamm.koe@gmail.com"];
   let phone = ["+1 1233 123123123", "+21 1233 123 123 1"];

   async function loadContact() {

   }

   async function load() {
      loading = true;
      await Promise.all([
         loadProfile(),
         loadContact()
      ])
      loading = false;
   }

   load();
</script>

<style>
   .btn {
      background-color: var(--primary);
      margin: auto 0;
      margin-left: 1rem;
      font-size: 1rem;
      padding: 0 0.5rem;
   }

   .floating {
      margin-bottom: 0;
   }

   .input-container {
      display: flex;
   }

   .input-container>*:first-child {
      flex-grow: 1;
   }

   select {
      background-color: unset;
      border: 0;
      border-radius: 0;
      color: unset;
      font-size: unset;
      border-bottom: 1px solid #757575;
      /* Firefox */
      -moz-appearance: none;
      /* Safari and Chrome */
      -webkit-appearance: none;
      appearance: none;
      height: 100%;
      width: 100%;
   }

   select>option {
      background-color: unset;
   }

   .select-wrapper {
      position: relative;
   }

   .select-wrapper::after {
      content: ">";
      display: block;
      position: absolute;
      right: 2rem;
      top: 0;
      bottom: 0;
      width: 1rem;
      transform: rotate(90deg) scaleY(2);
   }

   .error {
      color: var(--error);
   }
</style>

<Box>
   <h1>Profile</h1>
   {#if error}
      <p class="error">{error}</p>
   {/if}
   <BoxItem name="Name" value={name}>
      <div class="input-container">
         <div class="floating group">
            <input type="text" autocomplete="username" bind:value={name}>
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>Name</label>
         </div>
         <button class="btn" on:click={saveName}>Save</button>
      </div>
   </BoxItem>
   <BoxItem name="Gender" value={genderHuman}>
      <div class="input-container">
         <div class="select-wrapper">
            <select bind:value={gender}>
               <option value={1}>Male</option>
               <option value={2}>Female</option>
               <option value={3}>Other</option>
            </select>
         </div>
         <button class="btn" on:click={saveGender}>Save</button>
      </div>
   </BoxItem>
   <BoxItem name="Birthday" value={birthday} />
   <BoxItem name="Password" value="******" />
</Box>

<Box>
   <h1>Contact</h1>
   <BoxItem name="E-Mail" value={email} />
   <BoxItem name="Phone" value={phone} />
</Box>