import type { Metadata } from "next";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import localFont from "next/font/local";
import "./globals.css";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { MonitorIcon, WifiIcon, BluetoothIcon, Volume2Icon } from "lucide-react";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Separator } from "@/components/ui/separator";


const nf = localFont({
  src: "/fonts/SymbolsNerdFontMono-Regular.ttf",
	variable: "--font-nf"
});


export const metadata: Metadata = {
  title: "System Settings",
  description: "Main system settings page",
};

const props = { color: "#FFFFFF" };
const pages: {link: string, icon: JSX.Element, name: string, tooltip: string, colour: string}[] = [
	{
		name: "Wifi",
		link: "/wifi",
    icon: <WifiIcon {...props} />,
		tooltip: "Configure WiFi Networks",
    colour: "blue"// Tailwind's blue-500
	},
  {
    name: "Bluetooth",
    link: "/bluetooth",
    icon: <BluetoothIcon {...props} />,
    tooltip: "Configure and pair bluetooth devices",
    colour: "blue"
  },
  {
    name: "Sound",
    link: "/sound",
    icon: <Volume2Icon {...props} />,
    tooltip: "Manage inputs and outputs",
    colour: "red"
  },
  // {
  //   name: "VPN",
  //   link: "/bluetooth",
  //   icon: ...
  //   tooltip: "Configure and pair bluetooth devices"
  // },
	{
    name: "Display",
    link: "/display",
    icon: <MonitorIcon {...props} />,
    tooltip: "Modify the layout of your monitors",
    colour: "green"
  }
];

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${GeistSans.variable} ${GeistMono.variable} ${nf.variable} antialiased`}
      >
        <div className={"grid grid-cols-2 h-screen w-screen font-sans"}>
          <nav className={"md:w-80 w-fit h-full bg-gray-100 flex flex-col gap-2 p-4 transition ease-in-out duration-75"}>
            <div className={"flex flex-row"}>
              {/*
                For some reason, in dev mode (haven't tried prod), tailwind does not
                  seem to be able to generate the classes for the colours.
                This is a shitty hack that should be removed later.
              */}
              <p className="bg-red-500">R</p>
              <p className="bg-green-500">G</p>
              <p className="bg-blue-500">B</p>
            </div>
            <div className={"w-full bg-white flex flex-col p-1 rounded-md"}>
              { pages.map((page, index) => (
                <TooltipProvider key={index}>
                <Tooltip>
                  <TooltipTrigger>
                    <Link href={page.link}>
                      <div className="w-full flex flex-row items-center justify-start space-x-4 h-12 px-4">
                        <div className={`w-8 h-8 rounded-sm bg-${page.colour}-500 flex items-center justify-center`}>
                          {page.icon}
                        </div>
                        <span className="text-lg text-left text-black">{page.name}</span>
                      </div>
                    </Link>
                    { (index + 1 < pages.length) && <Separator /> }
                  </TooltipTrigger>
                  <TooltipContent>{page.tooltip}</TooltipContent>
                </Tooltip></TooltipProvider>
              ))}
            </div>
          </nav>
          <main>{children}</main>
        </div>
      </body>
    </html>
  );
}