<template>
	<header class="header">
		<div class="lang-bar">
			<a :href="catalog.file" target="_blank" class="catalog-download">
				<span>{{staticData.catalog}}</span>
				<span>&nbsp;</span>
				<i class="fas fa-download"></i>
			</a>
			<div class="dropdown" @mouseenter="drop" @mouseleave="drop">
				<div class="title">
					<p class="current-lang">
						<span>FA / EN</span>
						<i class="fas fa-sort-down"></i>
					</p>
				</div>
				<div class="dropMenu">
					<div class="drop-item">
						<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'fa'}}">FA</nuxt-link>
					</div>
					<div class="drop-item">
						<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'en'}}">EN</nuxt-link>
					</div>
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<nav class="row align-items-center">
				<!-- desktop -->
				<div class="col-12 d-none d-md-block links">
					<div class="container-fluid">
						<ul class="row justify-content-start">
							<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a class="logo">
									<Logo/>
								</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.home}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.about}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.services}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" tag="li" class="">
								<a>{{staticData.products}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-projects',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.projects}}</a>
							</nuxt-link>
							<li class="tech_info" @mouseenter="tech_info" @mouseleave="tech_info"
								 :class="$route.name === 'lang-tech-gDesign' ||
								 $route.name === 'lang-tech-gStandard' ||
								 $route.name === 'lang-tech-gTech' ||
								 $route.name === 'lang-tech-gUsage' ? 'active' : null">
								<a>{{staticData.tech_info}}</a>
								<div class="drop-down">
									<ul>
										<li :class="$route.name === 'lang-tech-gTech' ? 'sub-menu-active' : null">
											<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}">{{staticData.ti_1}}</nuxt-link>
										</li>
										<li :class="$route.name === 'lang-tech-gStandard' ? 'sub-menu-active' : null">
											<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}">{{staticData.ti_2}}</nuxt-link>
										</li>
										<li :class="$route.name === 'lang-tech-gDesign' ? 'sub-menu-active' : null">
											<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}">{{staticData.ti_3}}</nuxt-link>
										</li>
										<li :class="$route.name === 'lang-tech-gUsage' ? 'sub-menu-active' : null">
											<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}">{{staticData.ti_4}}</nuxt-link>
										</li>
									</ul>
								</div>
							</li>
							<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" tag="li" class="">
								<a>{{staticData.blog}}</a>
							</nuxt-link>
							<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" tag="li" exact class="">
								<a>{{staticData.contact}}</a>
							</nuxt-link>
						</ul>
					</div>
				</div>
				
				<!-- mobile -->
				<div class="col-12 d-md-none links mobile">
					<div class="container-fluid">
						<ul class="row">
							<li class="col">
								<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" exact class="logo">
									<Logo/>
								</nuxt-link>
							</li>
							<li class="col menu">
								<div id="menuBtn" @click="offCanvas">
									<div class="bars b1"></div>
									<div class="bars b2"></div>
									<div class="bars b3"></div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</header>
</template>

<script>
   export default {
      data() {
         return {
            catalog: null
         }
      },
      async fetch() {
         let catalog = await this.$axios.get('/api/public/catalog')
         this.catalog = catalog.data
      },
      computed: {
         staticData() {
            return this.$store.state.staticData.header[this.$route.params.lang]
         },
         offCanvasLiTL() {
            if (process.server) return null
            else return this.$gsap.timeline({delay: 0.3, paused: true})
               .fromTo($('.offCanvas ul li'), {
                  x: this.$route.params.lang === 'fa' ? 10 : -10,
                  opacity: 0
               }, {
                  x: 0,
                  opacity: 1,
                  duration: 0.4,
                  stagger: 0.03
               })
         }
      },
      methods: {
         drop() {
            $('.dropdown').toggleClass('dropdown-active')
         },
         tech_info() {
            const el = $('.tech_info .drop-down')
            if (el.height() === 0) {
               el.css({height: $('.tech_info .drop-down ul').height()})
            } else {
               el.css({height: 0})
            }
         },
         offCanvas() {
            if ($('.offCanvas').hasClass('active')) this.offCanvasLiTL.reverse()
            else this.offCanvasLiTL.play()
            $('#menuBtn').toggleClass('close')
            $('.offCanvas').toggleClass('active')
            $('body').toggleClass('offCanvas-active')
         }
      },
      mounted() {
         /////////////////////////////////////////////////////////// small header
         $(window).scroll(function (e) {
            if ($(window).scrollTop() > 50) {
               $('.header,.offCanvas').addClass('header-small')
            } else {
               $('.header,.offCanvas').removeClass('header-small')
            }
         })
         /////////////////////////////////// offCanvas menu links
         $('.offCanvas ul li').click(() => {
            this.offCanvas()
         })
         $('.header .lang-bar a').click(() => {
            if ($('.offCanvas').hasClass('active')) this.offCanvas()
         })
      }
   }
</script>
