import { useMemo } from 'react';
import type { RequestedApplication } from './AccountCreated';
import { Box, Button } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CountDownTimer } from '@/components/CountDownTimer';
import type { PalleteColor } from '@/theme/palette';

export interface AccountCreatedRedirectButtonProps {
  requestedApplication: RequestedApplication;
  onRedirectUser: () => void;
}

export const AccountCreatedRedirectButton = ({
  requestedApplication,
  onRedirectUser,
}: AccountCreatedRedirectButtonProps) => {
  const { t } = useTranslation('authentication');

  const buttonText = useMemo<string>(() => {
    switch (requestedApplication) {
      case 'club':
        return (
          t('accountCreated.redirectingTo') +
          ' ' +
          t('accountCreated.harmonyClub')
        );

      default:
        return t('accountCreated.redirecting');
    }
  }, [requestedApplication, t]);

  const buttonColor = useMemo<PalleteColor>(() => {
    switch (requestedApplication) {
      case 'club':
        return 'club';

      default:
        return 'primary';
    }
  }, [requestedApplication]);

  return (
    <Box sx={{ m: 1 }}>
      <Button color={buttonColor} variant="outlined" onClick={onRedirectUser}>
        {buttonText + ' '} (
        <CountDownTimer initialSeconds={5} onComplete={onRedirectUser} />)
      </Button>
    </Box>
  );
};
