<template>
	<header class="header">
		<div class="container-fluid">
			<nav class="row align-items-center">
				<div class="col-7 links">
					<div class="container-fluid">
						<ul class="row align-items-center">
							<nuxt-link :to="staticData.home.url" tag="li" exact class="col">
								<a class="logo">
									<logo/>
								</a>
							</nuxt-link>
							<nuxt-link :to="staticData.home.url" tag="li" exact class="col">
								<a>{{staticData.home.title}}</a>
							</nuxt-link>
							<nuxt-link :to="staticData.about.url" tag="li" exact class="col">
								<a>{{staticData.about.title}}</a>
							</nuxt-link>
							<nuxt-link :to="staticData.services.url" tag="li" exact class="col">
								<a>{{staticData.services.title}}</a>
							</nuxt-link>
							<nuxt-link :to="staticData.products.url" tag="li" exact class="col">
								<a>{{staticData.products.title}}</a>
							</nuxt-link>
							<nuxt-link :to="staticData.contact.url" tag="li" exact class="col">
								<a>{{staticData.contact.title}}</a>
							</nuxt-link>
						</ul>
					</div>
				</div>
				<div class="col-5 lag-switcher">
					<div class="container-fluid">
						<ul class="row flex-row-reverse align-items-center">
							<li>
								<div class="dropdown" id="lang">
									<div class="title">
										<p class="current-lang">فا</p>
									</div>
									<div class="dropMenu">
										<div class="drop-item">
											<p id="fa" class="locales">فا</p>
										</div>
										<div class="drop-item">
											<p id="en" class="locales">EN</p>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	</header>
</template>

<script>
   export default {
      computed: {
         staticData() {
            if (this.$route.params.lang === 'fa') {
               return this.$store.state.staticData.header.fa
            } else if (this.$route.params.lang === 'en') {
               return this.$store.state.staticData.header.en
            }
         }
      },
      mounted() {
         const that = this
         /////////////// lang switcher dropdown
         $('#lang').hover(function () {
            $(this).toggleClass('dropdown-active')
         })

         /////////////// switching language
         $('.locales').click(function () {
            if ($(this).attr('id') === 'fa') {
               const currentURL = window.location.href
               const urlSplit = currentURL.split('en')
               console.log(urlSplit)
               if (urlSplit.length > 1) {
                  that.$router.push('/fa' + urlSplit[1])
                  $('html').attr({lang: 'fa'})
						$('.current-lang').text('فا')
               }
            } else if ($(this).attr('id') === 'en') {
               const currentURL = window.location.href
               const urlSplit = currentURL.split('fa')
               console.log(urlSplit)
               if (urlSplit.length > 1) {
                  that.$router.push('/en' + urlSplit[1])
                  $('html').attr({lang: 'en'})
                  $('.current-lang').text('EN')
               }
            }
         })

      }
   }
</script>
