<template>
  <v-app-bar color="transparent" height="100" flat absolute style="z-index: 98">
    <!--drawer button for small screens         @click="toggleDrawer()"
-->

    <v-app-bar-nav-icon class="d-lg-none absolute"></v-app-bar-nav-icon>

    <v-row class="d-md-none mt-4" justify="center">
      <v-col cols="6" md="3" align="end" align-self="center" class="d-md-none">
        <LocaleChanger />
      </v-col>
      <v-col cols="5" md="3" align="center">
        <div class="d-flex">
          <v-btn
            href="https://www.instagram.com/sharjaheduaward?igsh=MTF6ZDZ2Njk3MHJiaA="
            target="_blank"
            class="polygon-btn text-white bg-darkSecondary mx-2"
            ><v-icon>mdi-instagram</v-icon></v-btn
          >
          <v-btn
            href="https://x.com/shjspea?s=20"
            target="_blank"
            class="polygon-btn text-white bg-darkSecondary mx-2"
            ><v-icon
              ><svg
                width="14"
                height="14"
                viewBox="0 0 14 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M11.0987 0.90625H13.1662L8.64934 6.06875L13.9631 13.0938H9.80246L6.54371 8.83313L2.81496 13.0938H0.746231L5.57746 7.57188L0.47998 0.90625H4.74621L7.69184 4.80062L11.0987 0.90625ZM10.3731 11.8563H11.5187L4.12371 2.07875H2.89434L10.3731 11.8563Z"
                  fill="white"
                />
              </svg> </v-icon
          ></v-btn>
        </div>
      </v-col>
    </v-row>
    <!--TABS-->
    <v-tabs
      align-tabs="center"
      hide-slider
      grow
      class="py-3 d-none d-md-inline"
    >
      <v-row>
        <v-col cols="6" md="3" align="center" class="d-none d-md-inline">
          <!--TODO @click="$router.push({ name: 'home' })"-->
          <button class="invisible-btn mx-15">
            <v-img
              :src="
                $route.path === '/'
                  ? '/private_education_authority_logo.svg'
                  : '/private_education_authority_logo_light.svg'
              "
              class="mx-4"
              width="175"
            ></v-img>
          </button>
        </v-col>
        <v-col cols="1" md="5"></v-col>
        <v-col cols="7" md="4">
          <v-row justify="center">
            <v-col cols="3" align-self="center" class="d-none d-md-inline">
              <div class="d-flex">
                <v-btn
                  href="https://www.instagram.com/sharjaheduaward?igsh=MTF6ZDZ2Njk3MHJiaA="
                  target="_blank"
                  class="polygon-btn text-white bg-darkSecondary mx-2"
                  ><v-icon>mdi-instagram</v-icon></v-btn
                >

                <v-btn
                  href="https://x.com/shjspea?s=20"
                  target="_blank"
                  class="polygon-btn text-white bg-darkSecondary mx-2"
                  ><v-icon
                    ><svg
                      width="14"
                      height="14"
                      viewBox="0 0 14 14"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M11.0987 0.90625H13.1662L8.64934 6.06875L13.9631 13.0938H9.80246L6.54371 8.83313L2.81496 13.0938H0.746231L5.57746 7.57188L0.47998 0.90625H4.74621L7.69184 4.80062L11.0987 0.90625ZM10.3731 11.8563H11.5187L4.12371 2.07875H2.89434L10.3731 11.8563Z"
                        fill="white"
                      />
                    </svg> </v-icon
                ></v-btn>
              </div>
            </v-col>
            <v-col cols="3" align-self="center" class="ms-3 d-none d-md-inline">
              <LocaleChanger />
            </v-col>
            <v-col cols="5" class="d-none d-md-inline">
              <!--TODO @click="$router.push({ name: 'home' })"-->
              <v-img
                @click="$router.push({ path: '/' })"
                :src="
                  $route.path === '/'
                    ? '/vector-logo.svg'
                    : '/vector-logo_light.svg'
                "
                class="cursor-pointer"
                width="175"
              ></v-img>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-tabs>
  </v-app-bar>
</template>

<script>
import { useGlobalStore } from "@/store/GlobalStore";
import { mapActions } from "pinia";
import { topNavTabs, bottomNavTabs } from "./TabsList";
import LocaleChanger from "./components/LocaleChanger.vue";
import { useLocale } from "vuetify";

export default {
  components: {
    LocaleChanger,
  },
  mounted() {
    window.onscroll = () => {
      this.changeColor();
    };
  },
  data() {
    return {
      navColor: "transparent",
      topNavTabs: topNavTabs,
      bottomNavTabs: bottomNavTabs,
      locale: useLocale(),
    };
  },
  methods: {
    ...mapActions(useGlobalStore, ["changeDrawerVisibility"]),
    toggleDrawer() {
      this.changeDrawerVisibility();
    },
    changeColor() {
      if (
        document.body.scrollTop > 20 ||
        document.documentElement.scrollTop > 20
      ) {
        this.navColor = "lightNeutral";
      } else {
        this.navColor = "transparent";
      }
    },
  },
};
</script>

<style>
.v-toolbar__content,
.v-toolbar__extension {
  padding: 0px !important;
}
.rounded-ripple .v-ripple__container {
  border-radius: 24px;
}
.rounded-ripple:hover .v-ripple__container {
  border-radius: 24px;
}
.v-tabs__item:hover {
  background-color: transparent !important;
}
</style>
