import { useMemo } from 'react';
import { AuthenticationCard } from '../AuthenticationCard';
import { Box, Divider, Stack, Typography } from '@mui/material';
import AccountCreatedIcon from '@/assets/account-created.svg';
import { useTranslation } from 'react-i18next';
import { Link as RouterLink, useSearchParams } from 'react-router-dom';
import Link from '@mui/material/Link';
import { AccountCreatedClubBanner } from './AccountCreatedClubBanner';
import { AccountCreatedRedirectButton } from './AccountCreatedRedirectButton';

export type RequestedApplication = 'default' | 'unknown' | 'club';

export const AccountCreated = () => {
  const { t } = useTranslation('authentication');
  const [params] = useSearchParams();

  // Checking if there is a requested application and if its club or any other url
  const requestedApplication = useMemo<RequestedApplication>(() => {
    const returnUrl = params.get('returnUrl');

    if (!returnUrl) return 'default';

    if (returnUrl.includes('club.business-harmony.com')) {
      return 'club';
    }

    return 'unknown';
  }, [params]);

  const handleRedirectUser = () => {
    const returnUrl = params.get('returnUrl');

    if (returnUrl) {
      location.href = returnUrl;
    }
  };

  return (
    <AuthenticationCard maxWidth="636px">
      <Stack sx={{ alignItems: 'center' }}>
        <img src={AccountCreatedIcon} />

        <Typography variant="h5" sx={{ mt: 2 }}>
          {t('accountCreated.yourHarmonyAccountHasBeenSuccessfullyCreated')}
        </Typography>

        <Typography variant="body2" sx={{ mt: 1, mb: 2 }}>
          {t('accountCreated.yourAccountInformationCanBeChangedThrough')}

          <Link component={RouterLink} to="/setting/profile" underline="always">
            {t('accountCreated.accountSettings')}
          </Link>

          {t('accountCreated.yourAccountInformationCanBeChangedThroughEnd')}
        </Typography>
      </Stack>

      {requestedApplication !== 'default' && (
        <Box sx={{ mx: 7 }}>
          <Divider sx={{ my: 2 }} />

          <Box sx={{ py: 2.5 }}>
            {requestedApplication === 'club' && <AccountCreatedClubBanner />}

            <AccountCreatedRedirectButton
              onRedirectUser={handleRedirectUser}
              requestedApplication={requestedApplication}
            />
          </Box>
        </Box>
      )}
    </AuthenticationCard>
  );
};