<script lang="ts">
  import {
    type ContactInfo,
    type Profile,
    Gender,
  } from "@hibas123/openauth-internalapi";
  import InternalAPI from "../../../helper/api";
  import Loading from "../Loading.svelte";
  import { onMount } from "svelte";
  import {
    Button,
    Card,
    Input,
    Label,
    Select,
    Heading,
    Spinner,
    Helper,
  } from "flowbite-svelte";

  let profileInfo: Profile;
  let loadedProfileInfo: Profile;
  let contactInfo: ContactInfo;

  let loading = true;
  let error: string | undefined;

  async function load() {
    error = undefined;
    loading = true;

    try {
      profileInfo = await InternalAPI.Account.GetProfile();
      loadedProfileInfo = { ...profileInfo };
      contactInfo = await InternalAPI.Account.GetContactInfos();
    } catch (e) {
      error = e.message;
    } finally {
      loading = false;
    }
  }

  let savingProfile = false;

  async function saveProfileChanges() {
    savingProfile = true;

    try {
      await new Promise((yes) => setTimeout(yes, 1000));
      await InternalAPI.Account.UpdateProfile(profileInfo);
      loadedProfileInfo = { ...profileInfo };
    } catch (e) {
      error = e.message;
    } finally {
      savingProfile = false;
    }
  }

  $: hasProfileChanged =
    JSON.stringify(profileInfo) != JSON.stringify(loadedProfileInfo);

  onMount(() => {
    load();
  });

  let genders = [
    {
      value: Gender.None,
      name: "Not saying",
    },
    {
      value: Gender.Male,
      name: "Male",
    },
    {
      value: Gender.Female,
      name: "Female",
    },
    {
      value: Gender.Other,
      name: "Other",
    },
  ];
</script>

<Loading {loading} {error}>
  <div class="flex flex-wrap gap-4">
    <Card size="md" class="w-full">
      <Heading tag="h5">General Account Details</Heading>
      <hr class="mb-6" />
      <div class="mb-6">
        <Label for="name-input" class="block mb-2">Name</Label>
        <Input
          id="name-input"
          placeholder="Name"
          bind:value={profileInfo.name}
        />
      </div>
      <div class="mb-6">
        <Label for="birthday-input" class="block mb-2">Birthday (WIP)</Label>
        <Input
          id="birthday-input"
          placeholder="Birthday"
          disabled
          bind:value={profileInfo.birthday}
        />
      </div>
      <div class="mb-6">
        <Label class="block mb-2"
          >Gender
          <Select items={genders} bind:value={profileInfo.gender} />
        </Label>
      </div>

      <Button
        disabled={!hasProfileChanged || savingProfile}
        on:click={saveProfileChanges}
      >
        {#if savingProfile}
          <Spinner class="mr-3" size="4" color="white" /> Saving...
        {:else}
          Save
        {/if}
      </Button>
    </Card>

    <Card size="md" class="w-full">
      <Heading tag="h5">Contact Details (WIP)</Heading>
      <hr class="mb-6" />

      <Heading tag="h6" color="gray">Mails</Heading>
      <hr class="mb-6" />

      {#each contactInfo.mail as mail}
        <div class="mb-6">
          <!-- <Label for="mail-input" class="block mb-2">Mail</Label> -->
          <Input
            id="mail-input"
            placeholder="Mail"
            bind:value={mail.mail}
            color={mail.verified ? "green" : "base"}
            disabled
          />
          {#if mail.verified}
            <Helper class="mt-2" color="green"
              ><span class="font-medium">Well done!</span> E-Mail is verified.</Helper
            >
          {:else}
            <Helper class="mt-2" color="gray"
              ><span class="font-medium">Oh no!</span> E-Mail needs verification.</Helper
            >
          {/if}
        </div>
      {/each}

      <Heading tag="h6" color="gray">Phones</Heading>
      <hr class="mb-6" />

      {#each contactInfo.phone as phone}
        <div class="mb-6">
          <!-- <Label for="phone-input" class="block mb-2">Phone</Label> -->
          <Input
            id="phone-input"
            placeholder="Phone"
            bind:value={phone.phone}
            color={phone.verified ? "green" : "base"}
            disabled
          />
          {#if phone.verified}
            <Helper class="mt-2" color="green"
              ><span class="font-medium">Well done!</span> Phone is verified.</Helper
            >
          {:else}
            <Helper class="mt-2" color="gray"
              ><span class="font-medium">Oh no!</span> Phone needs verification.</Helper
            >
          {/if}
        </div>
      {/each}
      <!-- <div class="mb-6">
      <Label for="name-input" class="block mb-2">Name</Label>
      <Input id="name-input" placeholder="Name" bind:value={profileInfo.name} />
    </div>
    <div class="mb-6">
      <Label for="birthday-input" class="block mb-2">Birthday (WIP)</Label>
      <Input
        id="birthday-input"
        placeholder="Birthday"
        disabled
        bind:value={profileInfo.birthday}
      />
    </div>
    <div class="mb-6">
      <Label class="block mb-2"
        >Gender
        <Select items={genders} bind:value={profileInfo.gender} />
      </Label>
    </div> -->

      <!-- <Button>Save</Button> -->
    </Card>
  </div>
</Loading>
