// import { useEffect, useState } from 'react';
import { ChevronsUpDown, Plus } from 'lucide-react';
import { Link } from 'react-router-dom';
import { toAbsoluteUrl } from '#shared/lib/helpers';
// import { cn } from '@crux-kit/utils';
// import { MENU_ROOT } from '#app/menu';
import { Button } from '#shared/ui/Button';
import {
  DropdownMenu,
  DropdownMenuContent,
  // DropdownMenuItem,
  DropdownMenuTrigger
} from '#shared/ui/DropdownMenu';

// import { SearchDialog } from '#shared/partials/dialogs/search/search-dialog';

export function SidebarHeader() {
  // const { pathname } = useLocation();
  // const [selectedMenuItem, setSelectedMenuItem] = useState(MENU_ROOT[1]);

  // useEffect(() => {
  //   MENU_ROOT.forEach((item) => {
  //     if (item.rootPath && pathname.includes(item.rootPath)) {
  //       setSelectedMenuItem(item);
  //     }
  //   });
  // }, [pathname]);

  return (
    <div className="flex flex-col gap-2.5">
      <div className="flex h-17.5 items-center justify-between gap-2.5 px-3.5">
        <Link to="/">
          <img
            src={toAbsoluteUrl('/media/app/mini-logo-circle-success.svg')}
            className="h-8.5"
            alt=""
          />
        </Link>

        <DropdownMenu>
          <DropdownMenuTrigger className="text-mono flex w-47.5 cursor-pointer items-center justify-between gap-2 font-medium">
            Metronic
            <ChevronsUpDown className="me-1 size-3.5!" />
          </DropdownMenuTrigger>
          <DropdownMenuContent
            sideOffset={10}
            side="bottom"
            align="start"
            className="dark w-(--radix-popper-anchor-width)"
          >
            {/* {MENU_ROOT.map((item, index) => (
              <DropdownMenuItem
                key={index}
                asChild
                className={cn(item === selectedMenuItem && 'bg-accent')}
              >
                <Link to={item.path || ''}>
                  {item.icon && <item.icon />}
                  {item.title}
                </Link>
              </DropdownMenuItem>
            ))} */}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <div className="flex items-center gap-2.5 px-3.5">
        <Button asChild variant="secondary" className="w-full max-w-49.5 justify-center text-white">
          <Link to="/public-profile/projects/3-columns">
            <Plus /> Add New
          </Link>
        </Button>

        {/* <SearchDialog
          trigger={
            <Button mode="icon" variant="secondary" className="justify-center text-white shrink-0">
              <Search className="size-4.5!" />
            </Button>
          }
        /> */}
      </div>
    </div>
  );
}