<script lang="ts">
  import type Modal from '$lib/models/modal';
  import { modalStore } from '$lib/stores/modal';
  import { faChevronLeft, faSave, faTrashCan, faX } from '@fortawesome/free-solid-svg-icons';
  import Fa from 'svelte-fa';
  import Button from '../elements/Button.svelte';

  export let title: string | undefined = undefined;
  export let back: Modal | undefined = undefined;
  export let saveFunc: void | (() => void) | undefined = undefined;
  export let deleteFunc: void | (() => void) | undefined = undefined;

  const dismissModal = () => {
    $modalStore?.hideModal();
  };
</script>

<div class="active-navbar-modal flex flex-col h-full -mx-4">
  {#if title}
    <div class="flex-shrink-0 h-16 flex justify-between items-center border-b border-widget-stroke">
      {#if back}
        <button on:click={() => (back ? $modalStore?.showModal(back) : null)}>
          <Fa icon={faChevronLeft} />
        </button>
      {:else}
        <div />
      {/if}
      <p class="w-full">{title}</p>
      <button on:click={dismissModal}>
        <Fa icon={faX} />
      </button>
    </div>
  {/if}
  <div class="flex-grow overflow-x-hidden overflow-y-auto px-4 pt-4">
    <slot />
  </div>
  {#if saveFunc}
    <div class="mx-4 mt-4 flex gap-2">
      <Button full={true} icon={faSave} style="white" onClick={saveFunc}>Save</Button>
      {#if deleteFunc}
        <Button iconOnly={true} icon={faTrashCan} onClick={deleteFunc} />
      {/if}
    </div>
  {/if}
</div>

<style lang="postcss">
  div > div > button,
  div > div > div {
    @apply text-text-clickable hover:text-text-primary transition-colors active:text-text-secondary w-[60px] h-12;
  }

  div > div > button,
  div > div > p {
    @apply flex items-center justify-center;
  }
</style>
