<script lang="ts">
  import { player, closeQueueDrawer } from '$lib/player/store.svelte';
  import QueueList from './QueueList.svelte';

  let previouslyFocused: HTMLElement | null = null;
  let closeButton: HTMLButtonElement | undefined = $state();

  $effect(() => {
    if (player.queueDrawerOpen) {
      previouslyFocused = document.activeElement as HTMLElement | null;
      // Defer to next microtask so the close button is rendered + visible
      // before we focus (the drawer may still be transitioning in).
      Promise.resolve().then(() => closeButton?.focus());
    } else if (previouslyFocused) {
      previouslyFocused.focus();
      previouslyFocused = null;
    }
  });
</script>

{#if player.queueDrawerOpen}
  <button
    type="button"
    aria-label="Close queue backdrop"
    class="fixed inset-0 bg-obsidian/40 z-40"
    onclick={() => closeQueueDrawer()}
  ></button>
{/if}

<aside
  aria-label="Playback queue"
  aria-hidden={!player.queueDrawerOpen}
  inert={!player.queueDrawerOpen}
  class="fixed top-0 right-0 h-full w-full sm:w-96 bg-surface z-50
         transition-transform duration-200
         {player.queueDrawerOpen ? 'translate-x-0' : 'translate-x-full'}"
>
  <QueueList
    onClose={() => closeQueueDrawer()}
    active={player.queueDrawerOpen}
    bind:closeButtonRef={closeButton}
  />
</aside>
