'use client'
import type {FunctionComponent, PropsWithChildren} from 'react';
import { Suspense} from 'react'
import {useState} from 'react'
import {TooltipProvider} from '@/components/ui/tooltip'
import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable'
import {Separator} from '@/components/ui/separator'
import {Calendar, Contact, TagIcon, User} from 'lucide-react'
import NavItem from '@/app/navItem'
import {cn} from '@/lib/utils'
import type {Route} from 'next'

type NavbarProps = PropsWithChildren

const Navbar: FunctionComponent<NavbarProps> = ({children}) => {
  const [isCollapsed, setIsCollapsed] = useState<boolean>(false)

  return (
    <TooltipProvider delayDuration={0}>
      <ResizablePanelGroup direction="horizontal" className="h-full items-stretch">
        <ResizablePanel
          defaultSize={isCollapsed ? 5 : 20}
          collapsedSize={5}
          collapsible={true}
          minSize={15}
          maxSize={20}
          onCollapse={() => setIsCollapsed(true)}
          onResize={() => setIsCollapsed(false)}
          className={cn(isCollapsed && 'transition-all duration-300 ease-in-out', 'min-w-[3.5em]')}>
          <div className="flex flex-col gap-4 py-2">
            {/* The linked page does not exist, it is added here to illustrate the 404 component.*/}
            <NavItem isCollapsed={isCollapsed} Icon={User} title="Account" path={'/account' as Route} />
            <Separator />
            <NavItem isCollapsed={isCollapsed} Icon={Contact} title="My contacts" path="/contacts" />
            <NavItem isCollapsed={isCollapsed} Icon={Calendar} title="My meetings" path="/meetings" />
            <NavItem isCollapsed={isCollapsed} Icon={TagIcon} title="Tags" path="/tags" />
          </div>
        </ResizablePanel>
        <ResizableHandle withHandle />
        <ResizablePanel defaultSize={80} minSize={60}>
          <div className="h-[100vh] mt-4 flex justify-center overflow-y-scroll">
            {/**
             * Suspense wordt hier toegevoegd om hydration errors te vermijden.
             * De loading.tsx in /app/(authenticated)/contacts/loading.tsx wordt gerenderd in een Suspense boundary die
             * automatisch door Next geïnjecteerd wordt. Het is mogelijk dat de server deze boundary rendered, maar dat
             * tegen dat de client met Hydration begint de data al opgehaald is, in dat geval verdwijnt de automatisch
             * geïnjecteerde suspense boundary en ontstaat er een hydration mismatch omdat de server de boundary
             * verwacht terwijl de client die niet meer rendered.
             *
             * Om dit probleem op te lossen kunnen we expliciet een Suspense boundary toevoegen, zo hoeft Next die niet
             * te injecteren en blijft deze altijd staan, ook als de data al geladen is.
             * Omdat deze er altijd staat, kan er ook geen hydration mismatch plaatsvinden.
             **/}
            <Suspense fallback={<></>}>
              <div className="w-[80%] md:w-[75%]">{children}</div>
            </Suspense>
          </div>
        </ResizablePanel>
      </ResizablePanelGroup>
    </TooltipProvider>
  )
}

export default Navbar
