<script>
import {mapState, mapMutations} from "vuex";
import AppNavigation from "./AppNavigation.vue";
import feather from "feather-icons";

export default {
  props: ["showMobileMenu"],

  components: {
    AppNavigation,
  },
  data: () => {
    return {
      modal: false,
    };
  },

  computed: {
    ...mapState(["socialProfiles"]),

    isMobileMenuOpened() {
      return this.$store.state.isMobileMenuOpened
    }
  },

  watch: {
    // Watch for route change to hide mobile menu
    isMobileMenuOpened() {
      feather.replace()
    }
  },

  mounted() {
    feather.replace();
  },


  methods: {
    themeSwitcher() {
      this.$colorMode.preference =
        this.$colorMode.value === "light" ? "dark" : "light";
    },

    toggleMobileMenu() {
      this.$store.commit('toggleMobileMenu')
    },

    toggleModal() {
      if (this.modal) {
        // Stop screen scrolling
        document
          .getElementsByTagName("html")[0]
          .classList.remove("overflow-y-hidden");
        this.modal = false;
      } else {
        document
          .getElementsByTagName("html")[0]
          .classList.add("overflow-y-hidden");
        this.modal = true;
      }
    },
  },
};
</script>

<template>
  <nav id="nav" class="top-0 z-50 absolute w-full">
    <div class="sm:w-full sm:px-14 px-4">
      <!-- Header -->
      <div
        class="
        z-10
        block
        sm:flex sm:justify-between sm:items-center
        py-6
      "
      >
        <!-- Header menu links and small screen hamburger menu -->
        <div class="flex justify-between items-center px-6 sm:px-0">
          <!-- Header logos -->
          <div>
            <NuxtLink to="/">
              <img
                src="/logo-white.png"
                alt="Logo"
                class="sm:w-32 w-24"
              />
            </NuxtLink>
          </div>

          <!-- Small screen hamburger menu -->
          <div class="sm:hidden">
            <button
              @click="toggleMobileMenu()"
              type="button"
              class="focus:outline-none"
              aria-label="Hamburger Menu"
            >
              <div class="h-7 w-7 mt-1 fill-current text-white">
                <div v-show="!isMobileMenuOpened"><i data-feather="menu"/></div>
                <div v-show="isMobileMenuOpened"><i data-feather="x"/></div>
              </div>
            </button>
          </div>
        </div>

        <!-- Header links -->
        <AppNavigation
          :toggleModal="toggleModal"
          :modal="modal"
        />

        <div class="flex flex-row">
          <SocialButton v-for="social in socialProfiles"
                        :key="social.id"
                        :feather-icon="social.icon"
                        :url="social.url"
                        class="hidden md:block"
          />
        </div>
      </div>

    </div>
  </nav>
</template>
