'use client'
import { Sidebar } from "lucide-react";
import React, { useMemo } from "react";
import MemberProfile from "./MemberProfile";
import WrapperContent from "./WrapperContent";
import { usePathname } from "next/navigation";
import SearchCommand from "./SearchCommand";
import { useMediaQuery } from "react-responsive";
import { MobileSidebar } from "./Sidebar";
import SettingsProject from "./projects/SettingsProject";

type PathLabel = "dashboard" | "Proyectos" | "Tareas" | "Inventario" | "Usuarios" | "Historial" | "Nuevo projecto"

type PathNames= {
  label:PathLabel,
  path:string
}


const PATH_NAMES:PathNames[] = [
  {
    label: "dashboard",
    path: "/dashboard",
  },
  {
    label: "Proyectos",
    path: "/dashboard/projects",
  },
  {
    label: "Tareas",
    path: "/dashboard/tasks",
  },
  {
    label: "Inventario",
    path: "/dashboard/stock",
  },
  {
    label: "Usuarios",
    path: "/dashboard/users",
  },
  {
    label: "Historial",
    path: "/dashboard/log",
  },
  {
    label: 'Nuevo projecto',
    path: "/dashboard/projects/create",
  },
];


const NavbarAdmin = () => {
  const path = usePathname()
  const isTablet = useMediaQuery({ query: "(max-width: 900px)" });

 
  const currentPathName:PathLabel | null=useMemo(()=>{
    return PATH_NAMES.find(pathItem=>pathItem.path === path)?.label || null
  },[path])

  return (
    <WrapperContent>
      <nav className="flex justify-between py-2 items-center h-[35px]">
        <h2 className="text-xl md:text-2xl font-semibold capitalize">{currentPathName}</h2>

        <div className="flex gap-3" suppressHydrationWarning>
        {currentPathName === 'Proyectos' || currentPathName === 'Tareas' ?  <SearchCommand isSearchQuery={currentPathName === 'Tareas'}/> :null}
        <MemberProfile />
        {isTablet && <MobileSidebar/>}
        </div>
        
      </nav>
    </WrapperContent>
  );
};

export default NavbarAdmin;