import { AppShellSection, Box } from "@mantine/core";
import { IconSettings } from "@tabler/icons-react";
import { useEffect, useState } from "react";
import { Outlet, useLocation } from "react-router";
import PageHeader from "./shared/page.header";

const BookingsLayout = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  const { search } = useLocation();
  const LINKS = [
    {
      Icon: IconSettings,
      label: "Internal",
      href: "?tab=internal",
    },
    {
      Icon: IconSettings,
      label: "External",
      href: "?tab=external",
    },
    // {
    //   Icon: IconSettings,
    //   label: "Events",
    //   href: "?tab=events",
    // },
  ];

  useEffect(() => {
    const searchParams = new URLSearchParams(search);
    const currentTab = searchParams.get("tab") ?? "internal";
    const currentIndex = LINKS.findIndex((item) =>
      item.href.includes(currentTab),
    );
    setActiveIndex(currentIndex === -1 ? 0 : currentIndex);
  }, [search]);

  return (
    <AppShellSection>
      <PageHeader
        links={LINKS}
        activeIndex={activeIndex}
        setActiveIndex={setActiveIndex}
        />
      <Box py={20} px={28}>
        <Outlet />
      </Box>
    </AppShellSection>
  );
};

export default BookingsLayout;