import { Item } from "../interfaces/Item";
import { SidebarComponents } from "./SidebarComponents";
import { SidebarGroups } from "./SidebarGroups";

interface Props {
  items: Item[];
  componentSelected?: Item;
  setComponentSelected: (value: Item) => void;
}

export function SidebarScopes({
  items,
  componentSelected,
  setComponentSelected,
}: Props) {
  const scopes: (string | undefined)[] = [];

  items.forEach((item) => {
    if (!scopes.some((scope) => scope === item.scope)) {
      scopes.push(item.scope);
    }
  });

  const scopesOrdered = scopes.sort((a, b) => {
    if (a === undefined) return 1;
    if (b === undefined) return -1;
    if (a < b) return -1;
    if (a > b) return 1;
    return 0;
  });

  return (
    <div className="component-book cb-flex cb-flex-col cb-gap-4">
      {scopesOrdered.map((scope, key) => {
        const itemsFiltered = items.filter((item) => item.scope === scope);

        if (scope === undefined || scope === "")
          return (
            <SidebarComponents
              items={itemsFiltered}
              componentSelected={componentSelected}
              setComponentSelected={setComponentSelected}
            />
          );

        return (
          <div key={key}>
            <div className="component-book cb-text-sm cb-font-semibold cb-mb-2 cb-px-2 cb-text-black dark:cb-text-white">
              {scope}
            </div>
            <div>
              <SidebarGroups
                scope={scope}
                items={itemsFiltered}
                componentSelected={componentSelected}
                setComponentSelected={setComponentSelected}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
}