import { useLocation, useNavigate } from 'react-router';
import { PATHS as HOMEPAGE } from 'pages/root/HomePage';

import { Box, Button, Text } from 'components/common';
import { ModalContainer } from 'components/modals';
import { call } from 'utils/call';

interface UpgradeSubscriptionModalProps {
  message?: string;
  from?: string;
  onDismiss?: () => void;
}

export type RedirectState = {
  path: string;
  name?: string;
};

export const UpgradeSubscriptionModal = ({
  message,
  from,
  onDismiss,
}: UpgradeSubscriptionModalProps) => {
  const navigate = useNavigate();
  const location = useLocation();

  const redirect = () => {
    navigate(`/${HOMEPAGE.subscribe}`, {
      state: {
        path: location.pathname,
        name: from,
      } as RedirectState,
    });
    call(onDismiss);
  };

  return (
    <ModalContainer title="Upgrade your plan">
      {message && <Text size="s">{message}</Text>}
      <Box display="flex" marginY={4} spacing={2}>
        <Button onClick={onDismiss} color="gray" block>
          Cancel
        </Button>
        <Button onClick={redirect} color="blue" block autoFocus>
          Upgrade
        </Button>
      </Box>
    </ModalContainer>
  );
};