<script lang="ts">
  import { error } from '@sveltejs/kit';
  import type { UserProfilePage } from "./+page";
  import { getUserFromLocalstorage as getUser } from '$lib/auth/session';
  import { formatTime } from '$lib/utils/utils';
  import { onMount } from 'svelte';

  export let data: UserProfilePage;
  const loggedInUser = getUser();
  if (loggedInUser === null) {
    throw error(401, 'You must be logged in to view this page.');
  }

  const userCreatedDate = Date.parse(data.user.created);
  let dateNow: number;
  $: timeSinceCreation = formatTime(dateNow - userCreatedDate);

  function updateCurrentTime() {
    dateNow = Date.now()
    setTimeout(updateCurrentTime, 1000);
  }

  onMount(async () => {
    updateCurrentTime();
  });

</script>

<div class="grow flex flex-col items-center justify-center gap-y-4 px-4">
  {#if loggedInUser.id === data.user.id}
    <h1>My Profile</h1>
  {:else}
    <h1>{`${data.user.first_name} ${data.user.last_name}'s Profile`}</h1>
  {/if}
  
  <div class="profileInfo">
    <p class="description">First Name</p><p class="data">{data.user.first_name}</p>
    <p class="description">Last Name</p><p class="data">{data.user.last_name}</p>
    <p class="description">Email</p><p class="data">{data.user.email}</p>
    <p class="description">Member Since</p><p class="data">{timeSinceCreation}</p>
  </div>

  <a class="button"
    href={`/users/${data.user.id}/todos`}
  >
    View Todos
  </a>
</div>

<style>
  h1 {
    @apply text-2xl;
  }

  div.profileInfo {
    @apply grid grid-cols-3 gap-x-2 gap-y-4;
    @apply p-4 rounded-lg;
    @apply border-2 border-secondary/50;
  }

  p.description {
    @apply text-secondary font-semibold text-end;
  }
  p.data{
    @apply col-span-2;
  }
</style>
