import { useMemo } from 'react';
import { useLocation, useParams } from 'react-router-dom';

import { SidebarExactNavLink } from 'components/sidebar/Sidebar';
import { SidebarNavLinkWithCount } from 'components/sidebar/SidebarNavLinkWithCount';

import { PATHS as WORKSPACE } from '../index';
import { SEGMENT_KEY } from 'components/collection/DatasetItem';
import { SET_KEY } from './FiltersPanel';

export const SegmentsList = ({
  data,
}: {
  data?: {
    id: string;
    name: string;
    totalProfiles: number;
  }[];
}) => {
  const location = useLocation();
  const { [WORKSPACE.collectionId]: collectionId } = useParams();

  const rootQuery = useMemo(() => {
    const queryParams = new URLSearchParams(location.search);
    queryParams.delete(SEGMENT_KEY);
    return queryParams;
  }, [location.search]);

  return (
    <div className="fz14">
      {collectionId && (
        <SidebarExactNavLink
          to={{
            pathname: '.',
            search: rootQuery.toString(),
            hash: location.hash,
          }}
        >
          All Fans
        </SidebarExactNavLink>
      )}
      {data?.map((item) => {
        const search = new URLSearchParams(location.search);
        search.delete(SET_KEY);
        search.set(SEGMENT_KEY, item.id);

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