<script>
  import { Modal, ModalHeader, ModalBody, ModalFooter, Icon, Toast } from 'sveltestrap';

  export let calendar = null;
  export let selectedCalendars = [];

  let share = document.URL;

  let isOpen = false;
  let isToastOpen = false;
  let isBinary = false;

  let toastText = '';

  const toggle = () => {
    isOpen = !isOpen;
    updateShareLink();
  };

  const doShare = () => {
    navigator.clipboard
      .writeText(share)
      .then(() => (toastText = '<b>Lien de partage copié dans le presse-papier.</b>'))
      .catch(() => (toastText = 'Erreur de copie automatique.'))
      .finally((isToastOpen = true));
  };

  const updateShareLink = () => {
    const loc = document.location;
    const search = new URLSearchParams();
    const api = calendar.getAPI();

    if (calendar !== null) {
      search.append('v', api.view.type);

      selectedCalendars.forEach(c => search.append('c', c));

      search.append('d', api.getDate().toISOString());
    }

    if (isBinary) {
      const b64 = window.btoa(search.toString());

      share = `${loc.origin}${loc.pathname}?b64=${b64}`;
    } else {
      share = `${loc.origin}${loc.pathname}?${search.toString()}`;
    }
  };

  const toggleBinary = () => {
    isBinary = !isBinary;
    updateShareLink();
  };

  $: shareDataIcon = isBinary ? 'code-square' : 'code';
</script>

<div class="share-toast">
  <Toast autohide body isOpen={isToastOpen} on:close={() => (isToastOpen = false)}>
    {@html toastText}
  </Toast>
</div>

<span class="share-btn fs-4" data-bs-toggle="tooltip" title="Partager" on:click={toggle}>
  <Icon name="share" />
</span>

<Modal {isOpen} {toggle} centered scrollable>
  <ModalHeader {toggle}>
    <Icon name="share" class="text-success me-2" />
    <b>Partage</b>
  </ModalHeader>

  <ModalBody>
    <p>La vue actuelle du calendrier peut être partagée avec l'URL suivante :</p>

    <a id="share-url" on:click={doShare}>{share}</a>
  </ModalBody>

  <ModalFooter>
    <span on:click={toggleBinary} class="flex-grow-1" title="Partager en base64">
      <Icon name={shareDataIcon} class="fs-5" />
    </span>

    <Icon name="balloon-heart" class="text-danger fs-5" />
    <span class="fs-7">Propulsé par le Club Réseau de l'ENS</span>
  </ModalFooter>
</Modal>

<style>
  .share-btn {
    position: absolute;
    top: 2.5em;
    right: 1em;
    cursor: pointer;
  }

  #share-url {
    max-width: 100%;
    display: block;
    overflow-wrap: break-word;
    cursor: pointer;
    user-select: all;
  }

  .share-toast {
    position: absolute;
    top: 1.25em;
    left: 1em;
    z-index: 1100;
  }
</style>
