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 useUnenrollFreeAgent from "../../hooks/use-unenroll-free-agent";

const UnenrollFreeAgent = ({ tournamentId, isRegional }: {tournamentId: string, isRegional?: boolean} ) => {
  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}>
        Unenroll
      </Button>

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

export default UnenrollFreeAgent;
