<template>
  <div v-if="deferredPrompt" class="prompt-modal">
    <div class="pwa-install-prompt-box">
      <h1 class="title mb-4">نصب نسخه pwa هم فهمی - زیست بوم پژوهشگران</h1>
      <div class="d-flex align-items-center mb-3">
        <img
          width="50"
          height="50"
          alt="لوگو"
          src="assets/common/img/logo/logo.png"
        />
        <p class="description mr-2 mb-0">
          با نصب نسخه pwa، میتوانید بصورت آفلاین نیز کارهایتان رو انجام دهید.
        </p>
      </div>
      <div class="d-flex justify-content-between">
        <div>
          <button
            id="installPWA"
            title="نصب"
            class="btn btn-primary ml-2"
            type="button"
            @click.prevent="installPwa()"
          >
            نصب
          </button>
          <button
            id="remindMeLater"
            title="یادآوری بعد از 1 روز "
            class="btn btn-secondary"
            @click.prevnet="dismissPwaInstallationBox(1)"
          >
            بعدا
          </button>
        </div>
        <button
          id="noNeed"
          title="دیگر یادآوری نکن"
          class="btn btn-danger"
          @click.prevnet="dismissPwaInstallationBox(365)"
        >
          نیاز ندارم
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";

export default {
  mounted() {
    const vm = this;

    this.checkBeforeAlertPwaNotSupported();

    window.addEventListener("beforeinstallprompt", vm.beforeInstallPrompt);
    window.addEventListener("appinstalled", vm.appInstalled);
  },
  beforeDestroy() {
    window.removeEventListener("beforeinstallprompt", this.beforeInstallPrompt);
    window.removeEventListener("appinstalled", this.appInstalled);
  },
  data() {
    return {
      deferredPrompt: null,
    };
  },
  
  methods: {
    ...mapActions(useCommonStore, [
      "SET_IS_MOBILE",
      "SET_IS_DESKTOP",
      "SET_PWA_INSTALL_PROMPT_EVENT",
    ]),
    beforeInstallPrompt(e) {
      e.preventDefault();
      // Stash the event so it can be triggered later.
      if (Cookies.get("add-to-home-screen") === undefined) {
        this.SET_PWA_INSTALL_PROMPT_EVENT(e);
        // vm.deferredPrompt = e;
      }
    },
    appInstalled() {
      this.SET_PWA_INSTALL_PROMPT_EVENT(null);
      // vm.deferredPrompt = null;
    },
    checkBeforeAlertPwaNotSupported() {
      // let vm = this;

      if (
        identifyBrowser().includes("Firefox") &&
        Cookies.get("add-to-home-screen") === undefined
      )
        alertPwaNotSupported();
    },
  },
};
</script>

<style lang="scss" scoped>
.prompt-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.11);

  // &::before {
  //   content: "";
  // }

  .pwa-install-prompt-box {
    max-width: 30em;
    width: 100%;
    background: #fafafa;
    border: 1px solid #eee;
    margin: auto;
    padding: 1em;
    border-radius: 0 0 0.5em 0.5em;

    .title {
      font-size: 1rem;
      font-family: "sahel-bold";
    }
    .description {
      font-size: 0.9rem;
      text-align: justify;
    }

    .current-version-number {
      font-size: 0.9rem;
      color: #aaa;
    }
    .new-version-number {
      font-family: "sahel-bold";
      font-size: 0.8rem;
    }
  }
}
</style>