import { useLocation } from 'react-router-dom';
import cc from 'classcat';

import { assignParams } from 'components/router/assignParams';
import { SidebarNavLinkWithCount } from 'components/sidebar/SidebarNavLinkWithCount';

import { PATHS as ALLIANCE } from '../index';

interface SidebarLinksProps {
  items: {
    id: string;
    name: string;
    totalProfiles: number;
  }[];
  queryKey: string;
  pathname: string;
  disabled?: boolean;
}

export const SidebarLinks = ({
  items,
  queryKey,
  pathname,
  disabled,
}: SidebarLinksProps) => {
  const location = useLocation();

  const className = cc({ disabled });
  return (
    <div className={className}>
      {items?.map((item) => {
        const search = assignParams(location.search, (s) => {
          s.delete(ALLIANCE.set);
          s.set(queryKey, item.id);
        });

        return (
          <SidebarNavLinkWithCount
            to={{
              pathname: pathname,
              search: search,
              hash: location.hash,
            }}
            name={item.name}
            count={item.totalProfiles}
            key={item.id}
          />
        );
      })}
    </div>
  );
};