<template>
  <header class="pwa-header">
    <div class="container-fluid">
      <div class="row">
        <div class="col-6">
          <div class="logo">
            <logo/>
          </div>
        </div>
        <div class="col-6 options">
          <nuxt-link :to="{name: 'lang-pwa',params: {lang: 'fa'}}">FA</nuxt-link>
          <nuxt-link :to="{name: 'lang-pwa',params: {lang: 'en'}}">EN</nuxt-link>
          <i :class="darkMode ? 'fas fa-sun' : 'fad fa-moon'" @click="toggleDarkMode"></i>
          <i :class="aboutPage ? 'fas fa-times-circle' : 'fas fa-info-circle'" @click="showAbout"></i>
        </div>
      </div>
    </div>
  </header>
</template>


<script>
export default {
  data() {
    return {
      darkMode: false,
      aboutPage: false,
      aboutPageTL: null
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.pwa[this.$route.params.lang]
    }
  },
  methods: {
    toggleDarkMode() {
      this.darkMode = !this.darkMode
      this.$emit('darkModeStatus', this.darkMode)
    },
    showAbout() {
      !this.aboutPage ? this.aboutPageTL.play() : this.aboutPageTL.play().reverse()
      this.aboutPage = !this.aboutPage
    }
  },
  mounted() {
    this.aboutPageTL = this.$gsap.timeline({paused: true})
        .to($('.pwa .pwa-about'), {autoAlpha: 1, duration: 0.1})
  }
}
</script>
