<script lang="ts">
  import type { Post } from '$lib/mastodon/response';
  import AvatarComponent from '$lib/components/AvatarComponent.svelte';
  import AccountComponent from '$lib/components/AccountComponent.svelte';
  import { secondsSince, relativeTime } from '$lib/relativeTime';
  import { onMount } from 'svelte';

  export let post: Post;
  let displayRelativeTime = false;
  const absoluteDate = new Date(post.created_at).toLocaleString();
  let dateCreated = absoluteDate;
  const timePassed = secondsSince(new Date(post.created_at));
  $: if (displayRelativeTime) {
    dateCreated = relativeTime($timePassed) ?? absoluteDate;
  }

  onMount(() => {
    // Display relative time only after mount:
    // When JS is disabled the server-side rendered absolute date will be shown,
    // otherwise the relative date would be outdated very quickly
    displayRelativeTime = true;
  });
</script>

<div class="wrapper">
  <div class="avatar"><AvatarComponent account={post.account} /></div>
  <div class="account"><AccountComponent account={post.account} /></div>
  <div class="meta">
    <small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
  </div>
  <div class="content">{@html post.content}</div>
  <div class="song">
    {#if post.songs}
      {#each post.songs as song (song.pageUrl)}
        <div class="info-wrapper">
          <div class="bgimage" style="background-image: url({song.thumbnailUrl});" />
          <a href={song.pageUrl ?? song.postedUrl} target="_blank">
            <div class="info">
              <img
                src={song.thumbnailUrl}
                class="cover"
                alt="Cover for {song.artistName} - {song.title}"
              />
              <span class="text">{song.artistName} - {song.title}</span>
            </div>
          </a>
        </div>
      {/each}
    {/if}
  </div>
</div>

<style>
  .wrapper {
    display: grid;
    grid-template-columns: 50px 1fr auto auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      'avatar account account meta'
      'avatar content content song'
      '. content content song';
    grid-column-gap: 6px;
    column-gap: 6px;
    grid-row-gap: 6px;
    row-gap: 6px;
  }
  .avatar {
    grid-area: avatar;
    max-width: 50px;
    max-height: 50px;
  }
  .account {
    grid-area: account;
  }
  .meta {
    grid-area: meta;
    justify-self: end;
  }
  .content {
    grid-area: content;
    word-break: break-word;
    translate: 0 -0.5em;
  }
  .song {
    grid-area: song;
    align-self: center;
    justify-self: center;
    max-width: 200px;
  }
  .cover {
    max-width: 200px;
    display: block;
    border-radius: 3px;
    margin-bottom: 3px;
  }
  .bgimage {
    display: none;
    background-color: var(--color-bg);
  }
  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    z-index: 1;
  }
  .info * {
    z-index: inherit;
  }
  @media only screen and (max-width: 650px) {
    .wrapper {
      grid-template-areas:
        'avatar account account meta'
        'content content content content'
        'song song song song';
      grid-row-gap: 3px;
      row-gap: 3px;
    }
    .song {
      width: 100%;
    }
    .song,
    .cover {
      max-width: 100%;
    }
    .cover {
      height: 60px;
    }
    .cover:not(.background) {
      z-index: 1;
      width: 60px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .bgimage {
      display: block;
      width: 100%;
      height: 60px;
      z-index: 0;
      filter: blur(10px);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
    .info {
      position: relative;
      top: -60px;
      flex-direction: row;
    }
    .info-wrapper {
      margin-bottom: -50px;
    }
    .text {
      padding: 3px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 3px;
      background-color: var(--color-bg-translucent);
      color: var(--color-text);
    }
  }
</style>
