import Button from "@/components/button";
import Sheet from "@/components/sheet/sheet";
import { useAuth } from "@/contexts/auth-context";
import { useSheet } from "@/hooks/use-sheet";
import { Stack, Text } from "@mantine/core";
import { Trans, useLingui } from "@lingui/react/macro";
import useUnenrollFreeAgent from "../../hooks/use-unenroll-free-agent";

const UnenrollFreeAgent = ({ tournamentId, isRegional }: {tournamentId: string, isRegional?: boolean} ) => {
  const { t } = useLingui();
  const { open, isOpen, toggle } = useSheet();
  const { user } = useAuth();

  const { mutate: unenrollFreeAgent, isPending: isEnrolling } = useUnenrollFreeAgent(isRegional);
  const handleUnenroll = () => {
    unenrollFreeAgent({ playerId: user!.id, tournamentId }, {
      onSuccess: () => {
        toggle();
      }
    });
  }

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

      <Sheet title={t`Unenroll from tournament?`} opened={isOpen} onChange={toggle}>
        <Stack gap="xs">
          <Text size="md">
            {isRegional
              ? <Trans>This will remove you from the tournament enrollment.</Trans>
              : <Trans>This will remove you from the free agent list.</Trans>}
          </Text>
          <Button color="red" onClick={handleUnenroll} loading={isEnrolling}>
            <Trans>Confirm Unenrollment</Trans>
          </Button>
          <Button variant="subtle" onClick={toggle}><Trans>Cancel</Trans></Button>
        </Stack>
      </Sheet>
    </>
  );
};

export default UnenrollFreeAgent;
