<!--
Switch year bar : Barre qui s'affiche lorsque l'utilisateur n'est pas sur l'année courante.
-->

<template>
  <UiSystemBar color="ot_warning" v-if="isShow">
    <template #bar.text>
      {{$t('not_current_year')}}
      <a @click="resetYear"><strong class="ot_black--text">{{$t('not_current_year_reset')}}</strong></a>
    </template>
  </UiSystemBar>
</template>

<script lang="ts">
import { defineComponent, useContext, computed} from '@nuxtjs/composition-api'
import {accessState, organizationState} from "~/types/interfaces";
import {useForm} from "~/composables/form/useForm";
import { useMyProfile } from '~/composables/data/useMyProfile'

export default defineComponent({
  setup () {
    const { store, $dataPersister } = useContext()
    const { markAsNotDirty } = useForm(store)
    const { updateMyProfile, setHistorical, setActivityYear } = useMyProfile($dataPersister, store)

    const profileAccess:accessState = store.state.profile.access
    const profileOrganization:organizationState = store.state.profile.organization

    const isShow = computed(() => {
      return (
        profileAccess.historical.past || profileAccess.historical.future
        ||
        profileAccess.historical.dateStart || profileAccess.historical.dateEnd
        ||
        profileAccess.activityYear !== profileOrganization.currentActivityYear
      )
    })

    const resetYear = async () =>{
      setHistorical(['present'])
      if(profileOrganization.currentActivityYear)
        setActivityYear(profileOrganization.currentActivityYear)

      markAsNotDirty()
      await updateMyProfile()
      window.location.reload()
    }

    return {
      isShow,
      resetYear
    }
  }
})
</script>

<style scoped>

</style>
