<template>
  <router-view v-slot="{ Component }">
    <transition
      :duration="{ enter: 200, leave: 200 }"
      name="route-fade"
      mode="out-in">
      <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
      <component :is="Component" />
    </transition>
    <footerMenu />
  </router-view>
  <loadingModal
    :showLoader="shouldShowLoader"
    :showTextCarousel="shouldShowTextCarousel"
    :textSlides="hasTextSlides" />
</template>

<script>
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
import footerMenu from '@/iss-components/footer-menu/footer-menu.vue';

export default {
    name: 'app',
    components: {
        footerMenu,
        loadingModal
    },
    setup() {
        const { globalNonpersistedState } = showIssLoadingModal();
        return { globalNonpersistedState };
    },
    computed: {
        hasTextSlides() {
            return this.globalNonpersistedState.carouselTextSlides;
        },
        shouldShowLoader() {
            return this.globalNonpersistedState.showLoadingModal;
        },
        shouldShowTextCarousel() {
            return this.globalNonpersistedState.showTextCarousel;
        }
    },
    watch: {
        shouldShowLoader(newVal) {
            // prevent keyboard input when loader is shown, re-enable when hidden
            if(newVal) {
                document.onkeydown = () => false;
            }
            else {
                document.onkeydown = null;
            }
        }
    }
};
// Add a global Javascript exception handler for logging exceptions, this handler will log when there is an uncaught exception
window.onerror = (msg, url, line, col, error) => {
    // Log the windows error
    // Note that col & error are new to the HTML 5 spec and may not be
    // supported in every browser.  It worked for me in Chrome.
    global.$logger.logError(msg, {
        url,
        line,
        column: col ?? '',
        error: error ?? ''
    });

    // If you return true, then error alerts (like in older versions of
    // Internet Explorer) will be suppressed.
    const suppressErrorAlert = true;
    return suppressErrorAlert;
};
</script>

<style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-typography-styles.scss";
   @import "@/styles/common-validation-styles.scss";
   @import "@/styles/common-animations.scss";
   @import "@/styles/shared-input-button-styles.scss";
   @import "@/styles/client-customizations.scss";
</style>
