<template>
  <a class="navbar-item network-item" :href="mailToLink" @click="waitForBlur">
    <v-icon scale="1.8" name="ri-mail-fill" />
    Newsletter
  </a>
  <div class="modal" :class="{ 'is-active': showModal }">
    <div class="modal-background"></div>
    <div class="modal-card">
      <div class="modal-card-body content">
        <p>
          Si aucun mail ne s'est ouvert, alors désolée, il faudra faire
          l'inscription manuellement. Une solution plus pratique est en cours de
          développement.
        </p>
        <p>
          Il vous faut envoyer à l'adresse
          <span
            class="copyable-text"
            @click="copyClipboard(mailDestination, 'L\'adresse email')"
          >
            {{ mailDestination }}
          </span>
          un mail dont l'objet soit
          <span
            class="copyable-text"
            @click="copyClipboard(mailSubject, 'L\'objet du mail')"
          >
            {{ mailSubject }}
          </span>
        </p>
        <div v-if="copiedItemFr" class="notification is-primary is-light">
          {{ copiedItemFr }} a été copié dans votre presse-papier
        </div>
      </div>
    </div>
    <button
      class="modal-close is-large"
      aria-label="close"
      @click="showModal = false"
    />
  </div>
</template>

<script lang="ts" setup>
const mailToLink =
  "mailto:sympa@lists.ens.psl.eu?subject=SUBSCRIBE%20cineclub-informations&body=Envoyez%20ce%20mail%20pour%20terminer%20de%20vous%20inscrire"
const mailDestination = "sympa@lists.ens.psl.eu"
const mailSubject = "SUBSCRIBE cineclub-informations"
const showModal = ref<boolean>(false)
const copiedItemFr = ref<string>("")

function waitForBlur() {
  if (process.server) return
  let t
  window.addEventListener("blur", () => clearTimeout(t), { once: true })
  t = setTimeout(() => (showModal.value = true), 500)
}

function copyClipboard(itemToCopy, itemName) {
  if (process.server) return
  navigator.clipboard.writeText(itemToCopy)
  copiedItemFr.value = itemName
}
</script>

<style lang="sass">
.copyable-text
  font-family: monospace
  cursor: pointer

  &:hover
    color: $primary
</style>
