<template>
  <div id="app" :class="[{ 'initializing-permission': authInitializing }, ...applicationClass]">
    <developer-mode-panel />
    <update-notification />
    <div
      class="animated fast app-notice bg-primary border font-weight-bold py-3 p-2 position-fixed rounded-2 shadow slideInDown slideInRight text-center text-white w-100 z-1000"
      v-if="getUnreadNotices.length > 0 && showNotice"
    >
      <b-row v-for="(notice, index) in getUnreadNotices" :key="`notice-${index}`" class="m-0">
        <b-col class="align-items-center d-flex justify-content-between mb-1 pr-0">
          <span>{{ $t(notice.message) }}</span>
          <b-btn variant="success" :to="notice.link.url">
            {{ $t(notice.link.text) }}
          </b-btn>
        </b-col>
        <b-col class="align-items-center justify-content-center d-flex flex-grow-0">
          <b-btn
            @click="noticeRead(notice.id)"
            variant="outline-secondary"
            class="align-middle circle-size-4 text-white p-0 text-center border-white"
          >
            <icon name="eshop-close" class="fa-icon icon-size-1" />
          </b-btn>
        </b-col>
      </b-row>
    </div>
    <router-view />
    <vue-progress-bar />
    <b-btn
      :title="`<strong>${$t('OnBehalf.Warning')}</strong>`"
      v-b-tooltip.html.left
      class="bg-danger border border-light-extra d-none m-3 p-3 pos-fixed-br rounded-5 shadow show-on-behalf-logged-in text-white"
    >
      <icon name="exclamation-triangle" class="icon-size-3" />
    </b-btn>
  </div>
</template>
<script>
import { DefaultProvider } from '@/providers'
import { mapGetters, mapActions, mapState } from 'vuex'
import pageScrollDetactMixin from '@/app/_global/mixins/pageScrollDetactMixin'
import processElements from '@/app/_global/utils/process-elements'
import UpdateNotification from '@/app/_global/components/elements/updateNotification'
import DeveloperModePanel from '@/app/_global/components/blocks/DeveloperModePanel'

export default DefaultProvider.extend({
  name: 'app',
  components: {
    UpdateNotification,
    DeveloperModePanel,
  },
  mixins: [pageScrollDetactMixin],
  mounted() {
    this.loadGeoCountry()
    this.isMobile().then(mobile => {
      if (!mobile) {
        if (process.env.VUE_APP_INIT_FRESH_WIDGET === 'true') {
          window.dispatchEvent(new Event('init.freshwidget'))
        }
        if (process.env.VUE_APP_INIT_FC_WIDGET === 'true') {
          window.dispatchEvent(new Event('init.fcwidget'))
        }
      }
    })
    if (this.$appSettings.evo.enable) {
      let favicon = document.getElementById('favicon') || {}
      favicon.href = favicon.href.replace('favicon.ico', 'evo-favicon.ico')
    }
  },
  computed: {
    ...mapGetters(['getUnreadNotices', 'getCurrentVersion', 'isMemberAuthorityInitialized']),
    ...mapState({
      showNotice: state => state.logModule.showNotice,
    }),
    authInitializing() {
      return (
        this.$route.matched.find(route => {
          return (route.meta !== undefined && route.meta.policy !== undefined) || route.name === 'DashboardHome'
        }) !== undefined && !this.isMemberAuthorityInitialized
      )
    },
    applicationClass() {
      let classes = []
      if (this.$appSettings.evo.enable) {
        classes = ['evo']
      }
      return classes
    },
  },
  methods: {
    ...mapActions(['noticeRead', 'isMobile', 'loadGeoCountry']),
    elements: processElements,
  },
})
</script>
<style src="animate.css/animate.css"></style>
<style src="bootstrap-vue/dist/bootstrap-vue.min.css"></style>
<!--<style lang="scss" src="@/assets/sass/themes/dashboard.scss"></style>-->
<style lang="scss" src="../assets/sass/screen.scss"></style>
<!--<style lang="scss" media="print" src="@/assets/sass/print.scss"></style>-->
