<script setup lang="ts">
import ChangeLanguageDropdownButton from "@/components/button/ChangeLanguageDropdownButton.vue";
import ChangeThemeDropdownButton from "@/components/button/ChangeThemeDropdownButton.vue";
import { useI18n } from "vue-i18n";
import { throttle } from "radash";
import { AnimatePresence, motion } from "motion-v";

const { t } = useI18n();

const showNavBar = ref(true);
const curScrollY = ref(0);

const handleThrottleScroll = throttle(100, () => {
  const scrollY = window.scrollY;
  if (scrollY > curScrollY.value) {
    showNavBar.value = false;
  } else {
    showNavBar.value = true;
  }
  curScrollY.value = scrollY;
});

window.addEventListener("scroll", handleThrottleScroll);
</script>

<template>
  <div class="w-full">
    <AnimatePresence>
      <motion.div
        v-show="showNavBar"
        class="navbar bg-base-200 shadow-sm"
        :exit="{
          y: -100,
          transition: {
            duration: 0.3,
          },
        }"
      >
        <div class="navbar-start">
          <div class="dropdown">
            <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h8m-8 6h16"
                />
              </svg>
            </div>
            <ul
              tabindex="-1"
              class="menu dropdown-content bg-base-100 rounded-box z-1 mt-5 w-52 p-2 shadow"
            >
              <li>
                <a>{{ t("nav.home") }}</a>
              </li>
              <li>
                <a>{{ t("nav.about") }}</a>
              </li>
            </ul>
          </div>
          <a class="btn btn-ghost text-xl">Hucky</a>
        </div>
        <div class="navbar-center hidden lg:flex">
          <ul class="menu menu-horizontal px-1">
            <li>
              <a>{{ t("nav.home") }}</a>
            </li>
            <li>
              <a>{{ t("nav.about") }}</a>
            </li>
          </ul>
        </div>
        <div class="navbar-end">
          <ChangeThemeDropdownButton />
          <ChangeLanguageDropdownButton />
        </div>
      </motion.div>
    </AnimatePresence>
  </div>
</template>

<style scoped></style>
