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";

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

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

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

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

export default UnenrollTeam;
