import { useIsAdmin } from "@/features/core/hooks/use-is-admin";
import { useTournaments } from "../queries";
import { useSheet } from "@/hooks/use-sheet";
import { Button, Stack } from "@mantine/core";
import { PlusIcon, TrophyIcon } from "@phosphor-icons/react";
import { Trans, useLingui } from "@lingui/react/macro";
import Sheet from "@/components/sheet/sheet";
import TournamentForm from "./tournament-form";
import { TournamentCard } from "./tournament-card";
import EmptyState from "@/components/empty-state";

const TournamentCardList = () => {
  const { t } = useLingui();
  const { data: tournaments } = useTournaments();
  const isAdmin = useIsAdmin();
  const sheet = useSheet();
  return (
    <Stack>
      {isAdmin ? (
        <>
          <Button
            leftSection={<PlusIcon />}
            variant="subtle"
            onClick={sheet.open}
          >
            <Trans>Create Tournament</Trans>
          </Button>
          <Sheet {...sheet.props} title={t`Create Tournament`}>
            <TournamentForm close={sheet.close} />
          </Sheet>
        </>
      ) : null}
      {tournaments && tournaments.length > 0 ? (
        tournaments.map((tournament: any) => (
          <TournamentCard key={tournament.id} tournament={tournament} />
        ))
      ) : (
        <EmptyState
          icon={<TrophyIcon size={32} />}
          title={t`No Tournaments Yet`}
          description={t`The cups are racked and waiting. Check back soon.`}
        />
      )}
    </Stack>
  );
};

export default TournamentCardList;