<script lang="ts">
  //// import
  import { onMount } from "svelte";

  //// var
  const portraits = [
    "/images/netopwibby/01.jpg",
    "/images/netopwibby/02.jpg",
    "/images/netopwibby/03.jpg",
    "/images/netopwibby/04.jpg",
    "/images/netopwibby/05.jpg",
    "/images/netopwibby/06.jpg",
    "/images/netopwibby/07.jpg",
    "/images/netopwibby/08.jpg",
    "/images/netopwibby/09.jpg",
    "/images/netopwibby/10.jpg",
    "/images/netopwibby/11.jpg",
    "/images/netopwibby/12.jpg",
    "/images/netopwibby/13.jpg",
    "/images/netopwibby/14.jpg",
    "/images/netopwibby/15.jpg"
  ];

  let about = "";
  let selfie = "";

  //// function
  function randomPortrait() {
    return portraits[Math.floor(Math.random() * portraits.length)];
  }

  async function showContent() {
    let aboutContent = "";

    try {
      const response = await fetch("/api/about.json", {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json"
        },
        method: "POST"
      });

      const { content } = await response.json();
      aboutContent = content;
    } catch(error) {
      console.error(error);
    }

    return aboutContent;
  }

  onMount(async() => {
    about = await showContent();
    selfie = randomPortrait();
  });
</script>

<style lang="scss">
  :root {
    --about-padding: calc(var(--padding) * 2);
  }

  h2 {
    margin: 0 0 var(--about-padding); padding: var(--padding) var(--about-padding);

    background-color: var(--color-border);
    color: var(--uchu-yin-7);
    font-size: 1rem;
    line-height: inherit;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  figure {
    margin-top: var(--about-padding);
    padding: 0 var(--about-padding) var(--about-padding) var(--about-padding);

    img {
      margin: 0;
    }

    figcaption {
      padding-top: var(--about-padding);
      text-align: center;
    }
  }

  .content {
    line-height: 1.55;
    overflow-x: hidden;
    padding-left: var(--about-padding);
    padding-right: var(--about-padding);
    position: relative;
    text-overflow: ellipsis;
    white-space: break-spaces;

    &.loading {
      padding-bottom: var(--about-padding);
    }
  }
</style>

<h2>
  <a href="https://about.webb.page" target="_blank">about.webb.page</a>
</h2>

{#if about === ""}
  <div class="content loading">Loading content&hellip;</div>
{:else}
  <div class="content">
    {@html about}
  </div>
{/if}

{#if selfie === ""}
  <div class="content loading">
    <p>Loading portrait&hellip;</p>
  </div>
{:else}
  <figure>
    <img alt="selfie" src={selfie}/>
    <figcaption>the most fantabulous</figcaption>
  </figure>
{/if}
