<script lang="ts">
  import { browser } from '$app/environment';

  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
  import Close from 'svelte-material-icons/Close.svelte';
  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
  import { fly } from 'svelte/transition';

  export let showBackButton = true;
  export let backIcon = Close;
  export let tailwindClasses = '';
  export let forceDark = false;

  let appBarBorder = 'bg-immich-bg border border-transparent';

  const dispatch = createEventDispatcher();

  const onScroll = () => {
    if (window.pageYOffset > 80) {
      appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';

      if (forceDark) {
        appBarBorder = 'border border-gray-600';
      }
    } else {
      appBarBorder = 'bg-immich-bg border border-transparent';
    }
  };

  onMount(() => {
    if (browser) {
      document.addEventListener('scroll', onScroll);
    }
  });

  onDestroy(() => {
    if (browser) {
      document.removeEventListener('scroll', onScroll);
    }
  });
</script>

<div in:fly={{ y: 10, duration: 200 }} class="fixed top-0 z-[100] w-full bg-transparent">
  <div
    id="asset-selection-app-bar"
    class={`grid grid-cols-3 justify-between ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
      forceDark && 'bg-immich-dark-gray text-white'
    }`}
  >
    <div class="flex place-items-center gap-6 justify-self-start dark:text-immich-dark-fg">
      {#if showBackButton}
        <CircleIconButton
          on:click={() => dispatch('close-button-click')}
          logo={backIcon}
          backgroundColor={'transparent'}
          hoverColor={'#e2e7e9'}
          size={'24'}
          forceDark
        />
      {/if}
      <slot name="leading" />
    </div>

    <div class="w-full">
      <slot />
    </div>

    <div class="mr-4 flex place-items-center gap-1 justify-self-end">
      <slot name="trailing" />
    </div>
  </div>
</div>
