import Sheet from "@/components/sheet/sheet";
import { useSheet } from "@/hooks/use-sheet";
import { UserListIcon } from "@phosphor-icons/react";
import { Trans, useLingui } from "@lingui/react/macro";
import { msg } from "@lingui/core/macro";
import { useMemo } from "react";
import { useFreeAgents } from "../../queries";
import { Text } from "@mantine/core";
import PlayerList from "@/features/players/components/player-list";
import { Player } from "@/features/players/types";
import { NavTile } from "../started-tournament/sections/nav-grid";

interface EnrolledPlayersListButtonProps {
  tournamentId: string;
}

const EnrolledPlayersListButton: React.FC<EnrolledPlayersListButtonProps> = ({ tournamentId }) => {
  const { data: freeAgents } = useFreeAgents(tournamentId);
  const count = useMemo(() => freeAgents.length, [freeAgents]);
  const { open, isOpen, toggle } = useSheet();
  const { t, i18n } = useLingui();

  const players = useMemo(() =>
    freeAgents.map(agent => agent.player).filter((player): player is Player => player !== undefined),
    [freeAgents]
  );

  return (
    <>
      <NavTile
        label={i18n._({
          ...msg`{count, plural, one {Players (#)} other {Players (#)}}`,
          values: { count },
        })}
        Icon={UserListIcon}
        onClick={open}
      />

      <Sheet title={t`Enrolled Players`} opened={isOpen} onChange={toggle}>
        {count === 0 ? (
          <Text size="sm" c="dimmed" ta="center" py="xl">
            <Trans>No players enrolled yet</Trans>
          </Text>
        ) : (
          <PlayerList players={players} />
        )}
      </Sheet>
    </>
  );
};

export default EnrolledPlayersListButton;
