import { View } from "react-native";
import Tabbar, { TabbarItem } from "@/components/layout/tabbar";
import Navbar from "@/components/layout/navbar";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Slot, useRouter, usePathname } from "expo-router";
import { useMemo, useRef } from "react";

export default function ModuleLayout({ tabs }: { tabs: TabbarItem[] }) {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const pathname = usePathname();

  const lastValidTabRef = useRef<TabbarItem | undefined>(undefined);
  const activeTabItem = useMemo(() => {
    const found = tabs.find((t) => t.id === pathname);

    if (found?.isCenter) {
      return lastValidTabRef.current;
    }

    if (found) {
      lastValidTabRef.current = found;
      return found;
    }

    return lastValidTabRef.current;
  }, [pathname, tabs]);

  function handleClose() {
    router.dismissTo("/tools");
  }

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, zIndex: 0 }}>
        <Slot />
      </View>

      <View
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          zIndex: 10,
        }}
      >
        <View style={{ paddingTop: insets.top }}>
          <Navbar
            title={activeTabItem?.title}
            titleIcon={activeTabItem?.icon}
            showBack={false}
            onClose={handleClose}
          />
        </View>
      </View>

      <View
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          bottom: 0,
          zIndex: 10,
        }}
      >
        <View style={{ paddingBottom: insets.bottom + 16 }}>
          <Tabbar tabs={tabs} value={activeTabItem?.id} onChange={(id) => router.push(id as any)} />
        </View>
      </View>
    </View>
  );
}