<script lang="ts">
  import { browser } from '$app/environment';
  import { page } from '$app/stores';
  import { onMount } from 'svelte';
  import { clearAllParameters, parseOrDefault } from '../Utility/parameters';
  import Message from '$lib/Loading/Message.svelte';
  import locale from '$stores/locale';
  import birthdays from '$lib/Data/Static/hololiveBirthdays.json';

  const urlParameters = browser ? new URLSearchParams(window.location.search) : null;
  let date = new Date();
  let month = parseOrDefault(urlParameters, 'month', date.getMonth() + 1);
  let day = parseOrDefault(urlParameters, 'day', date.getDate());

  $: todaysBirthdays = birthdays.filter(
    (birthday) => birthday.month === month && birthday.day === day
  );

  $: {
    month = Math.min(month, 12);
    month = Math.max(month, 1);
    day = Math.min(day, new Date(new Date().getFullYear(), month, 0).getDate());
    day = Math.max(day, 1);

    if (browser) {
      $page.url.searchParams.set('month', month.toString());
      $page.url.searchParams.set('day', day.toString());
      clearAllParameters(['month', 'day']);
      history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
    }
  }

  onMount(() => clearAllParameters(['month', 'day']));
</script>

<p>
  <select bind:value={month}>
    {#each Array.from({ length: 12 }, (_, i) => i + 1) as month}
      <option value={month}>
        {new Date(0, month - 1).toLocaleString('default', { month: 'long' })}
      </option>
    {/each}
  </select>

  <select bind:value={day}>
    {#each Array.from({ length: new Date(new Date().getFullYear(), month, 0).getDate() }, (_, i) => i + 1) as day}
      <option value={day}>{day}</option>
    {/each}
  </select>
</p>

{#if todaysBirthdays.length === 0}
  <Message
    message={`No birthdays for ${$locale().dayFormatter(
      new Date(new Date().getFullYear(), month - 1, day)
    )}.`}
    fullscreen={false}
    loader="ripple"
  />
{:else}
  <div class="characters">
    {#each todaysBirthdays as birthday}
      <div class="card card-small">
        <a
          href={`https://anilist.co/search/characters?search=${encodeURIComponent(
            birthday.name
          ).replace(/%20/g, '+')}`}
          target="_blank"
        >
          {birthday.name}
          <img src={birthday.image} alt="Character" class="character-image" />
        </a>
      </div>
    {/each}
  </div>
{/if}

<style lang="scss">
  .characters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1rem;
    grid-row-gap: 1rem;
    align-items: start;

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: 8px;
      margin-top: 0.5rem;
      box-shadow: 0 4px 30px var(--base01);
    }
  }
</style>
