<script lang="ts">
  import { page } from '$app/stores';
  import { getUserAvatar } from '$lib/config';
  import { editorStore } from '$lib/stores/editor';

  export let loadTime: number | undefined = undefined;
  export let uniqueId: string | undefined = undefined;
  export let align: BioSiteAlign = 'LEFT';
  export let small: boolean = false;
  export let tiny: boolean = false;
  export let veryTiny: boolean = false;

  $: noAvatar =
    ($page.data.bio?.hasAvatar !== true && $editorStore.avatar == null) ||
    $editorStore.edits.edits.deleteAvatar != null;

  $: isEditor = $page.url.pathname.startsWith('/dashboard');
  $: avatar = noAvatar
    ? undefined
    : $editorStore.avatar
    ? $editorStore.avatar
    : uniqueId
    ? getUserAvatar(uniqueId, isEditor ? loadTime : undefined)
    : undefined;
</script>

<div
  class="w-24 h-24 rounded-3xl avatar bg-center bg-cover"
  class:self-center={align === 'CENTER'}
  class:self-end={align === 'RIGHT'}
  class:small
  class:tiny
  class:very-tiny={veryTiny}
  style="--avatar: url({avatar ?? '/assets/default/avatar.svg'})" />

<style lang="postcss">
  div.avatar {
    background-image: var(--avatar);
  }

  div.small {
    @apply w-16 h-16 rounded-2xl;
  }

  div.tiny {
    @apply w-9 h-9 rounded-full;
  }

  div.very-tiny {
    @apply w-6 h-6 rounded-full;
  }
</style>
