import { Link, useLocation } from "react-router";
import clsx from "clsx";
import { SideBarItem } from "~/application/sidebar/SidebarItem";
import { getUiIdAttributes } from "~/application/ui/uiRegistry";

export function DocsSidebarNav({ items }: { items: SideBarItem[] }) {
  return (
    <div>
      {items.length > 0 ? (
        <div className="w-full">
          {items.map((item, index) => (
            <div key={index} className={clsx(item.items && item.items.length > 0 && "pb-4")} {...(!item.path ? getUiIdAttributes(item) : {})}>
              {item.items && item.items.length > 0 ? (
                <button type="button" aria-expanded="true" className="mb-1 rounded-md px-2 py-1 text-left font-semibold" {...getUiIdAttributes(item)}>
                  {item.title}
                </button>
              ) : item.path ? (
                <Link to={item.path} className="hover:underline" {...getUiIdAttributes(item)}>
                  <h4 className="mb-1 rounded-md px-2 py-1 font-semibold">{item.title}</h4>
                </Link>
              ) : (
                <h4 className="mb-1 rounded-md px-2 py-1 font-semibold">{item.title}</h4>
              )}
              {item.items && item.items.length > 0 && <DocsSidebarNavItems items={item.items} />}
            </div>
          ))}
        </div>
      ) : null}
    </div>
  );
}

function DocsSidebarNavItems({ items }: { items: SideBarItem[] }) {
  const location = useLocation();
  const pathname = location.pathname;
  return items?.length ? (
    <div className="grid grid-flow-row auto-rows-max">
      {items.map((item, index) =>
        item.path && !item.disabled ? (
          <Link
            key={index}
            to={item.path}
            className={clsx(
              "group flex w-full items-center rounded-md border border-transparent px-2 py-1 text-sm hover:underline",
              item.disabled && "cursor-not-allowed opacity-60",
              pathname === item.path ? "text-text-neutral-primary font-medium" : "text-text-neutral-tertiary"
            )}
            target={item.target}
            rel={item.target ? "noreferrer" : ""}
            {...getUiIdAttributes(item)}
            // preventScrollReset
          >
            {item.title}
            {item.side && (
              <span className="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
                {item.side}
              </span>
            )}
          </Link>
        ) : (
          <span
            key={index}
            aria-disabled={item.disabled ? "true" : undefined}
            className={clsx(
              "text-text-neutral-tertiary flex w-full items-center rounded-md p-2",
              !item.disabled && "hover:underline",
              item.disabled && "cursor-not-allowed opacity-60"
            )}
            {...getUiIdAttributes(item)}
          >
            {item.title}
            {item.side && (
              <span className="bg-surface-neutral-secondary text-text-neutral-tertiary ml-2 rounded-md px-1.5 py-0.5 text-xs leading-none no-underline group-hover:no-underline">
                {item.side}
              </span>
            )}
          </span>
        )
      )}
    </div>
  ) : null;
}