<template>
    <div v-if="offlineReady || needRefresh" role="alert">
        <div class="admonition warning">
            <p v-if="offlineReady">
                {{ t('pwa.ready') }}
            </p>
            <p v-else>
                {{ t('pwa.new_content') }}
            </p>
            <div class="">
                <button v-if="needRefresh" @click="updateServiceWorker()">
                    {{ t('pwa.reload') }}
                </button>
                <button @click="close">
                    {{ t('pwa.close') }}
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import {defineComponent} from "vue";
import {useRegisterSW} from "virtual:pwa-register/vue";
import {useI18n} from 'vue-i18n';

const {updateServiceWorker} = useRegisterSW();

export default defineComponent({
    name: "ReloadPWA",
    setup() {
        const {t} = useI18n({useScope: 'local'});
        const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW();
        const close = async () => {
            offlineReady.value = false;
            needRefresh.value = false;
        };
        return {offlineReady, needRefresh, updateServiceWorker, close, t};
    },
    methods: {
        async close() {
            this.offlineReady.value = false;
            this.needRefresh.value = false;
        },
        async updateServiceWorker() {
            await updateServiceWorker();
        },
    },
});
</script>

<i18n lang="json" locale="en" src="../locale/en.json"/>
<i18n lang="json" locale="fr" src="../locale/fr.json"/>
