RepositoryList.tsx

import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

import { IndexedTopics } from "../topics";
import { Repository } from "../types";

import { LanguageFilter } from "./LanguageFilter";
import { RepositoryItem } from "./RepositoryItem";
import { SDGFilter } from "./SDGFilter";
import { Grid, Stack } from "@primer/react-brand";

type RepositoryListProps = {
  repositories: Repository[];
  filter: string;
};

const Loader = () => (
  <div className="p-4 w-full flex items-center justify-center">
    <FontAwesomeIcon icon={faCircleNotch} className="fa-spin" />
  </div>
);

export const RepositoryList = ({ repositories, filter }: RepositoryListProps) => {
  const itemsPerScroll = 15;
  const [items, setItems] = useState(itemsPerScroll);
  const [selectedLanguages, setSelectedLanguages] = useState<string[]>([]);
  const [selectedTopics, setSelectedTopics] = useState<string[]>([]);

  const filteredRepositories = repositories.filter((repository) => {
    const languageFilter =
      selectedLanguages.length === 0 ||
      selectedLanguages.includes(repository.language.display);

    const topicFilter =
      selectedTopics.length === 0 ||
      repository.topics?.some((topic) =>
        selectedTopics.includes(topic.display)
      );

    const nameFilter = Object.values(repository).some(
      (value) =>
        value &&
        value.toString().toLowerCase().includes(filter.toLowerCase())
    );

    const happyContainer = Object.values(repository).some(
      (value) =>
        value &&
        value.toString().toLowerCase().includes(filter.toLowerCase())
    );

    return languageFilter && nameFilter && topicFilter && happyContainer;
  });

  // ✅ Repository count logic
  const totalCount = repositories.length;
  const visibleCount = filteredRepositories.length;

  const uniqueLanguages = [
    ...new Set(repositories.map((repository) => repository.language.display)),
  ];
  const languageOptions = uniqueLanguages.map((language) => ({
    value: language,
    label: language,
  }));

  const uniqueTopics = [
    ...new Set(
      repositories.flatMap(
        (repository) =>
          repository.topics?.map((topic) => topic.display) ?? []
      )
    ),
  ].sort((a, b) => parseInt(a.slice(4)) - parseInt(b.slice(4)));

  const topicOptions = uniqueTopics.map((topic) => ({
    value: topic,
    label: IndexedTopics[topic],
  }));

  const loadMoreItems = () => setItems(items + itemsPerScroll);
  const hasMoreItems = items < filteredRepositories.length;

  return (
    <main className="repoWrap">
      <div className="grid-wrap">
        <Grid>
          {/* LEFT COLUMN – FILTERS */}
          <Grid.Column
            span={{ xsmall: 12, small: 12, medium: 12, large: 5, xlarge: 3 }}
          >
            <Stack className="stack">
              <LanguageFilter
                setSelectedLanguages={setSelectedLanguages}
                languageOptions={languageOptions}
              />
              <SDGFilter
                setSelectedTopics={setSelectedTopics}
                topicOptions={topicOptions}
              />
            </Stack>
          </Grid.Column>

          {/* RIGHT COLUMN – REPOSITORY LIST */}
          <Grid.Column
            className="repo-list-wrap"
            span={{ xsmall: 12, small: 12, medium: 12, large: 7, xlarge: 9 }}
          >
            {/* ✅ STEP 5: Repository count indicator */}
            <p className="text-sm text-gray-500 mb-3">
              {visibleCount === totalCount
                ? `Showing ${totalCount} repositories`
                : `Showing ${visibleCount} of ${totalCount} repositories`}
            </p>

            <InfiniteScroll
              dataLength={items}
              next={loadMoreItems}
              hasMore={hasMoreItems}
              loader={<Loader />}
            >
              {filteredRepositories
                .slice(0, items)
                .map((repository) => (
                  <RepositoryItem
                    key={repository.id}
                    repository={repository}
                  />
                ))}
            </InfiniteScroll>
          </Grid.Column>
        </Grid>
      </div>
    </main>
  );
};