import { Stack, Text } from "@mantine/core";
import { useMemo } from "react";
import { Match } from "../types";
import MatchCard from "./match-card";
import { Trans } from "@lingui/react/macro";

interface MatchListProps {
  matches: Match[];
  hideH2H?: boolean;
}

const MatchList = ({ matches, hideH2H = false }: MatchListProps) => {
  const filteredMatches = useMemo(
    () =>
      [...(matches ?? [])]
        .filter(match =>
          match.home && match.away && !match.bye && match.status != "tbd"
        )
        .sort((a, b) => a.start_time < b.start_time ? 1 : -1),
    [matches]
  );

  if (!filteredMatches.length) {
    return undefined;
  }

  const isRegional = filteredMatches[0]?.tournament?.regional;

  return (
    <Stack p="md" gap="sm">
      {isRegional && (
        <Text size="xs" c="dimmed" ta="center" px="md">
          <Trans>Matches for regionals are unordered</Trans>
        </Text>
      )}
      {filteredMatches.map((match, index) => (
        <div
          key={`match-${match.id}-${index}`}
        >
          <MatchCard match={match} hideH2H={hideH2H} />
        </div>
      ))}
    </Stack>
  );
};

export default MatchList;