<template>
  <header
    v-if="currentMenuView !== 'menu'"
    :class="[
      'fixed inset-x-0 z-40 transition-all duration-300',
      isHeaderVisible
        ? 'translate-y-0 opacity-100'
        : '-translate-y-full opacity-0',
      isScrolled ? 'bg-[#fff]/60 py-1.5 backdrop-blur-2xl' : 'py-2',
    ]"
  >
    <div class="max-w-7xl mx-auto px-8">
      <div class="flex items-center justify-between">
        <a :href="basePath">
          <img
            src="/muco-logo.svg"
            alt="Müco Logo"
            class="transition-all duration-300"
            :class="isScrolled ? 'h-8 lg:h-18' : 'h-10 lg:h-18'"
          />
        </a>

        <LanguageSwitcher />
      </div>
    </div>
  </header>

  <MenuLayout
    :campaigns="campaigns"
    :categories="categories"
    :fallback-image="fallbackImage"
    @view-change="currentMenuView = $event"
  />
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from "vue";
import { useRoute } from "vue-router";

import { usePageData } from "@/composables/usePageData";
import { useMeta } from "@/composables/useMeta";

type Image = {
  src?: string;
  alt?: string;
};

type MenuParent = {
  id: number;
  title: string;
  image?: Image;
};

type MenuItem = {
  title: string;
  description?: string;
  image?: Image;
  price?: string;
};

type MenuCategory = {
  parent?: MenuParent;
  title: string;
  description?: string;
  image?: Image;
  items?: MenuItem[];
};

type Campaign = {
  title: string;
  excerpt: string;
  description: string;
  image: {
    src: string;
    alt: string;
  };
  startDate: string;
  endDate: string;
  tags: string[];
  discount: string;
};

type MenuData = {
  categories?: MenuCategory[];
  meta?: Record<string, any>;
};

type CampaignData = {
  campaigns?: Campaign[];
};

type ActiveView = "home" | "menu" | "campaigns" | "contact";

const fallbackImage = "/images/general-img-square.webp";

const route = useRoute();

const isScrolled = ref(false);
const isHeaderVisible = ref(true);
const currentMenuView = ref<ActiveView>("home");

let lastScrollY = 0;

const currentLang = computed<"en" | "tr">(() => {
  return route.path.startsWith("/en") ? "en" : "tr";
});

const basePath = computed(() => {
  return currentLang.value === "en" ? "/en/" : "/";
});

const menuData = usePageData<MenuData>("menu", currentLang.value);
const campaignsData = usePageData<Campaign[]>("campaigns", currentLang.value);

useMeta(menuData.value?.meta ?? {}, currentLang.value);

const categories = computed<MenuCategory[]>(() => {
  return menuData.value?.categories ?? [];
});

const campaigns = computed<Campaign[]>(() => {
  return campaignsData.value ?? [];
});

function handleScroll() {
  const currentScrollY = window.scrollY;

  isScrolled.value = currentScrollY > 20;

  if (currentScrollY <= 20) {
    isHeaderVisible.value = true;
    lastScrollY = currentScrollY;
    return;
  }

  isHeaderVisible.value = currentScrollY <= lastScrollY;
  lastScrollY = currentScrollY;
}

onMounted(() => {
  lastScrollY = window.scrollY;
  handleScroll();

  window.addEventListener("scroll", handleScroll, { passive: true });
});

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>
