<script setup lang="ts">
import { alertController, modalController } from "@ionic/vue";
import IOSInstallGuide from "./ios-install-guide.vue";

const { t } = useI18n();

const {
  showInstallButton,
  promptInstall,
  isIOS,
} = usePWAInstall();

async function handleInstall() {
  const result = await promptInstall();

  if (result.outcome === "accepted") {
    const alert = await alertController.create({
      header: t("pwa.install.success"),
      message: t("pwa.install.successMessage"),
      buttons: [t("common.ok")],
    });
    await alert.present();
  }
  else if (result.outcome === "ios-instruction") {
    const modal = await modalController.create({
      component: IOSInstallGuide,
    });
    await modal.present();
  }
}
</script>

<template>
  <IonButton
    v-if="showInstallButton"
    expand="block"
    @click="handleInstall"
  >
    <IIcBaselineDownload class="mr-2" />
    {{ isIOS ? t('pwa.install.addToHomeScreen') : t('pwa.install.installApp') }}
  </IonButton>
</template>
