import {SidebarInset, SidebarMenuButton, SidebarMenuItem, SidebarProvider} from "@/components/ui/sidebar.tsx";
import {EarthIcon, Grid2X2Icon, HomeIcon, Link2Icon, LogsIcon, SettingsIcon} from "lucide-react";
import {AppSidebar} from "@/components/app-sidebar.tsx";
import {Link, Route, Switch, useLocation} from "wouter";
import {Home} from "@/pages/Home";
import Proxies from "@/pages/Proxies.tsx";
import {Profiles} from "@/pages/Profiles";
import {Connections} from "@/pages/Connections.tsx";
import {Logs} from "@/pages/Logs.tsx";
import {Settings} from "@/pages/Settings.tsx";
import {Toaster} from "@/components/ui/sonner.tsx";
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";

// Menu items.
const items = [
  {
    title: "Home",
    url: "/",
    icon: HomeIcon,
  },
  {
    title: "Proxies",
    url: "/proxies",
    icon: EarthIcon,
  },
  {
    title: "Profiles",
    url: "/profiles",
    icon: Grid2X2Icon,
  },
  {
    title: "Connections",
    url: "/connections",
    icon: Link2Icon,
  },
  {
    title: "Logs",
    url: "/logs",
    icon: LogsIcon,
  },
  {
    title: "Settings",
    url: "/settings",
    icon: SettingsIcon,
  },
]

const queryClient = new QueryClient()

function App() {
  const [location] = useLocation();
  return (
    <div>
      <QueryClientProvider client={queryClient}>
        <Toaster position="top-right" closeButton={true}/>
        <SidebarProvider>
          <AppSidebar>
            {items.map((item) => (
              <SidebarMenuItem key={item.title}>
                <SidebarMenuButton asChild isActive={location == item.url}>
                  <Link to={item.url}>
                    <item.icon/>
                    <span>{item.title}</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </AppSidebar>
          <SidebarInset className={'overflow-hidden'}>
            <div className={'flex-1 size-full min-h-0 min-w-0 overflow-hidden'}>
              <Switch>
                <Route path="/" component={Home}/>
                <Route path="/proxies" component={Proxies}/>
                <Route path="/profiles" component={Profiles}/>
                <Route path="/connections" component={Connections}/>
                <Route path="/logs" component={Logs}/>
                <Route path="/settings" component={Settings}/>
              </Switch>
            </div>
          </SidebarInset>
        </SidebarProvider>
      </QueryClientProvider>

    </div>
  )
}

export default App