import { useCoreServices } from '@learnitive/context';
import {
  Breadcrumb,
  Button,
  buttonVariants,
  cn,
  DropdownMenu,
} from '@learnitive/ui-components';
import { useAtomValue } from 'jotai';
import { Home, PlusIcon } from 'lucide-react';
import React from 'react';

interface WsNameBreadcrumbProps {
  wsName: string;
}

/**
 * Renders the breadcrumb for the workspace home page,
 * showing the current workspace name and allowing switching/creating workspaces. */
export function WsNameBreadcrumb({ wsName }: WsNameBreadcrumbProps) {
  const coreServices = useCoreServices();
  const workspaces = useAtomValue(coreServices.workspaceState.$workspaces);

  const otherWorkspaces = React.useMemo(
    () => workspaces.filter((workspace) => workspace.name !== wsName),
    [workspaces, wsName],
  );

  return (
    <Breadcrumb.Breadcrumb>
      <Breadcrumb.BreadcrumbList>
        <Breadcrumb.BreadcrumbItem>
          <Breadcrumb.BreadcrumbLink
            className={cn(
              buttonVariants({ variant: 'ghost', size: 'icon' }),
              'h-7 w-7',
            )}
            href={coreServices.navigation.toUri({
              route: 'welcome',
              payload: {},
            })}
            title={t.app.common.home}
          >
            <Home size={16} />
          </Breadcrumb.BreadcrumbLink>
        </Breadcrumb.BreadcrumbItem>
        <Breadcrumb.BreadcrumbSeparator />
        <Breadcrumb.BreadcrumbItem>
          <DropdownMenu.DropdownMenu>
            <DropdownMenu.DropdownMenuTrigger
              render={
                <Button
                  variant="ghost"
                  className="h-auto cursor-pointer px-1 py-0 font-medium text-sm hover:underline"
                >
                  {wsName}
                </Button>
              }
            />
            <DropdownMenu.DropdownMenuContent align="start">
              <DropdownMenu.DropdownMenuItem
                onClick={() => {
                  coreServices.commandDispatcher.dispatch(
                    'command::ui:create-workspace-dialog',
                    null,
                    'WsNameBreadcrumb',
                  );
                }}
              >
                <PlusIcon className="mr-2 h-4 w-4" />
                <span>{t.app.common.newWorkspace}</span>
              </DropdownMenu.DropdownMenuItem>
              {otherWorkspaces.length > 0 && (
                <>
                  <DropdownMenu.DropdownMenuSeparator />
                  {otherWorkspaces.map((workspace) => (
                    <DropdownMenu.DropdownMenuItem
                      key={workspace.name}
                      onClick={() => {
                        coreServices.navigation.goWorkspace(workspace.name);
                      }}
                    >
                      {workspace.name}
                    </DropdownMenu.DropdownMenuItem>
                  ))}
                </>
              )}
            </DropdownMenu.DropdownMenuContent>
          </DropdownMenu.DropdownMenu>
        </Breadcrumb.BreadcrumbItem>
      </Breadcrumb.BreadcrumbList>
    </Breadcrumb.Breadcrumb>
  );
}