import Button from "@/components/button";
import Sheet from "@/components/sheet/sheet";
import { useSheet } from "@/hooks/use-sheet";
import { useCallback } from "react";
import useUnenrollTeam from "../../hooks/use-unenroll-team";
import { Stack, Text } from "@mantine/core";
import { Trans, useLingui } from "@lingui/react/macro";

interface UnenrollTeamProps {
  tournamentId: string;
  teamId: string
  onSubmit: () => void;
}

const UnenrollTeam = ({ tournamentId, teamId, onSubmit }: UnenrollTeamProps) => {
  const { t } = useLingui();
  const { open, isOpen, toggle } = useSheet();
  const { mutate: unenrollTeam, isPending } = useUnenrollTeam();
  const handleUnenrollTeam = useCallback(
    async () => {
      await unenrollTeam({ tournamentId, teamId }, {
        onSuccess: () => {
          toggle();
          onSubmit();
        }
      });
    },
    [unenrollTeam, tournamentId]
  );

  return (
    <>
      <Button size="sm" onClick={open} variant="subtle">
        <Trans>Unenroll</Trans>
      </Button>

      <Sheet title={t`Unenroll Team`} opened={isOpen} onChange={toggle}>
        <Stack gap='xs'>
          <Text size="sm" fw={500}><Trans>Are you sure you want to unenroll from this tournament? You can enroll again at any point before the deadline.</Trans></Text>
          <Button onClick={handleUnenrollTeam} loading={isPending}><Trans>Confirm</Trans></Button>
          <Button variant="subtle" color="red" onClick={toggle} disabled={isPending}><Trans>Cancel</Trans></Button>
        </Stack>
      </Sheet>
    </>
  );
};

export default UnenrollTeam;
