import React, { useMemo, useState } from 'react';
import { AuthenticationCard } from '../AuthenticationCard';
import { Box, CardHeader, 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';

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('https://club.business-harmony.com/')) {
      return 'club';
    }

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

  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 }} />

          {requestedApplication === 'club' && <AccountCreatedClubBanner />}
        </Box>
      )}
    </AuthenticationCard>
  );
};