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 useEnrollFreeAgent from "../../hooks/use-enroll-free-agent";
import { Trans, useLingui } from "@lingui/react/macro";

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

  const { mutate: enrollFreeAgent, isPending: isEnrolling } = useEnrollFreeAgent(isRegional);
  const handleEnroll = () => {
    enrollFreeAgent({ playerId: user!.id, tournamentId, phone }, {
      onSuccess: () => {
        toggle();
      }
    });
  }

  return (
    <>
      <Button variant="subtle" size="sm" onClick={open}>
        {isRegional ? <Trans>Enroll</Trans> : <Trans>Enroll As Free Agent</Trans>}
      </Button>

      <Sheet title={isRegional ? t`Enrollment` : t`Free Agent Enrollment`} opened={isOpen} onChange={toggle}>
        <Stack gap="xs">
          {isRegional ? (
            <>
              <Text size="md">
                <Trans>Enroll in this regional tournament to be assigned a random partner.</Trans>
              </Text>
            </>
          ) : (
            <>
              <Text size="md">
                <Trans>Enrolling as a free agent adds you to a pool of players looking for teammates.</Trans>
              </Text>
              <Text size="sm" c='dimmed'>
                <Trans>Once enrolled, you can view other free agents and their phone number in order to coordinate teams and walkout songs.</Trans>
              </Text>
              <Text size="xs" c="dimmed">
                <Trans>Important: Enrolling as a free agent does not guarantee a tournament spot. To secure a spot, one team member must register through the app and select a walkout song.</Trans>
              </Text>
            </>
          )}
          <Button onClick={handleEnroll} loading={isEnrolling}><Trans>Confirm</Trans></Button>
          <Button variant="subtle" color="red" onClick={toggle}><Trans>Cancel</Trans></Button>
        </Stack>
      </Sheet>
    </>
  );
};

export default EnrollFreeAgent;
