<script>
  import { mdiClose } from '@mdi/js';
  import { cubicOut } from 'svelte/easing';
  import CustomModal from './CustomModal.svelte';
  import Icon from './Icon.svelte';

  export let nofocus = false;
  export let size = ''; // small, mediumlarge, medium, large
  export let title = '';
  export let noClose = false;
  export let noDivider = false;
  export let centerHeader = false;

  let className = '';
  let modal;

  export { className as class };

  function close() {
    modal.close();
  }

  function settle(node) {
    return {
      easing: cubicOut,
      delay: 150,
      duration: 150,
      css: (/** @type {any} */ t, /** @type {number} */ rt) => `transform: translate(0, -${rt * 25}px); opacity: ${t}`,
    };
  }
</script>

<CustomModal bind:this={modal} {size} class={className} on:close {nofocus}>
  <div class="modal-dialog" role="document" transition:settle|local>
    <div class="modal-content">
      {#if title}
        <header class={(noDivider ? ' no-divider' : '') + (centerHeader ? ' center-header' : '')}>
          {#if size === 'large'}
            <h2>{title}</h2>
          {:else if size === 'medium' || size === 'mediumlarge'}
            <h2>{title}</h2>
          {:else if size === 'small'}
            <h4>{title}</h4>
          {:else}
            <h3>{title}</h3>
          {/if}
        </header>
      {/if}
      <slot>
        <section />
        <footer />
      </slot>
      {#if !noClose}
        <button class="icon display-icon-close" on:click={close}>
          <Icon path={mdiClose} />
        </button>
      {/if}
    </div>
  </div>
</CustomModal>

<style>
  .display-icon-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px !important;
  }
  .modal-dialog {
    position: relative;
    width: auto;
    background-color: var(--page-background);
    background-clip: padding-box;
    border-radius: 0.5rem;
    box-shadow: var(--modal-shadow);
    outline: 0;
    padding: 1.5rem;
  }
  .modal-dialog .modal-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .modal-dialog header {
    padding: 0 1rem 1rem;
    border-bottom: 2px solid var(--dabble-yellow);
  }
  .modal-dialog header.no-divider {
    height: 2rem;
    padding: 2rem 1rem 1.5rem 0rem;
    border-bottom: none;
  }
  .modal-dialog header.center-header {
    text-align: center;
  }
  .danger .modal-dialog header {
    border-bottom: 2px solid #d9534f;
  }
  .modal-dialog header::before,
  .modal-dialog footer::before {
    display: table;
    content: ' ';
  }
  .modal-dialog header::after,
  .modal-dialog footer::after {
    display: table;
    content: ' ';
    clear: both;
  }
  .modal-dialog header h2,
  .modal-dialog header h3,
  .modal-dialog header h4 {
    color: var(--text-color-normal);
    margin: 0;
  }
  .modal-dialog header h2 {
    font-size: 1.75rem;
  }
  .modal-dialog header h3 {
    font-size: 1.25rem;
  }
  .modal-dialog header h4 {
    font-size: 1rem;
  }
  .modal-dialog .modal-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  :root {
    --dabble-yellow: #f5a503;
  }

  button.icon {
    display: inline-flex;
    justify-content: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    --webkit-appearance: none;
    background: transparent;
    border-radius: 999px;
    margin: 0;
    padding: 0.2em;
    font-size: 20px;
    outline: none;
    border: 0;
    color: var(--text-color-lighter);
    text-shadow: var(--text-highlight);
    transition: 0.15s color linear;
    cursor: pointer;
    transition:
      background-color 0.15s linear,
      opacity 0.15s linear;
  }
  button.icon.feature-disabled::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--dabble-red);
    position: absolute;
    top: 6px;
    left: 5px;
  }
  button.icon.large {
    font-size: 24px;
  }
  button.icon.small {
    font-size: 16px;
  }
  button.icon:not([disabled]):hover,
  button.icon:not([disabled]):focus-visible {
    color: var(--text-color-normal);
  }
  button.icon.light {
    color: var(--text-color-lighterer);
  }
  button.icon.light:not([disabled]):hover,
  button.icon.light:not([disabled]):focus-visible {
    color: var(--text-color-lighter);
  }
  button.icon[disabled] {
    opacity: 0.5;
    cursor: default;
  }
  /*button.icon:not([disabled]):hover::before, button.icon:not([disabled]):focus::before {
  position: relative;
}*/
  button.icon:not([disabled]):hover,
  button.icon:not([disabled]):focus-visible {
    background-color: rgba(0, 0, 0, 0.08);
  }
  button.with-icon {
    font-family: 'dabble-icons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    --webkit-appearance: none;
    background: none;
    outline: none;
    border: 0;
    color: var(--text-color-lighter);
    text-shadow: var(--text-highlight);
    cursor: pointer;
  }
  button.with-icon::before {
    font-size: 20px;
  }
  button.with-icon:not([disabled]):hover {
    color: var(--text-color-normal);
  }
  button.with-icon[disabled] {
    opacity: 0.5;
    cursor: default;
  }
</style>
