import React, { useMemo } from 'react';
import { Box, Text, color } from 'folds';
import { Link, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useAuthServer } from '../../../hooks/useAuthServer';
import { RegisterFlowStatus, useAuthFlows } from '../../../hooks/useAuthFlows';
import { PasswordRegisterForm, SUPPORTED_REGISTER_STAGES } from '../register/PasswordRegisterForm';
import { SupportedUIAFlowsLoader } from '../../../components/SupportedUIAFlowsLoader';
import { getLoginPath } from '../../pathUtils';
import { RegisterPathSearchParams } from '../../paths';
import * as css from '../styles.css';

const useRegisterSearchParams = (searchParams: URLSearchParams): RegisterPathSearchParams =>
  useMemo(
    () => ({
      username: searchParams.get('username') ?? undefined,
      email: searchParams.get('email') ?? undefined,
      token: searchParams.get('token') ?? undefined,
    }),
    [searchParams]
  );

export function Register() {
  const { t } = useTranslation();
  const server = useAuthServer();
  const { registerFlows } = useAuthFlows();
  const [searchParams] = useSearchParams();
  const registerSearchParams = useRegisterSearchParams(searchParams);

  return (
    <Box direction="Column" gap="500">
      {registerFlows.status === RegisterFlowStatus.RegistrationDisabled && (
        <Text style={{ color: color.Critical.Main }} size="T300">
          {t('Auth.register_disabled')}
        </Text>
      )}
      {registerFlows.status === RegisterFlowStatus.RateLimited && (
        <Text style={{ color: color.Critical.Main }} size="T300">
          {t('Auth.register_rate_limited')}
        </Text>
      )}
      {registerFlows.status === RegisterFlowStatus.InvalidRequest && (
        <Text style={{ color: color.Critical.Main }} size="T300">
          {t('Auth.register_invalid_request')}
        </Text>
      )}
      {registerFlows.status === RegisterFlowStatus.FlowRequired && (
        <SupportedUIAFlowsLoader
          flows={registerFlows.data.flows ?? []}
          supportedStages={SUPPORTED_REGISTER_STAGES}
        >
          {(supportedFlows) =>
            supportedFlows.length === 0 ? (
              <Text style={{ color: color.Critical.Main }} size="T300">
                {t('Auth.register_unsupported')}
              </Text>
            ) : (
              <PasswordRegisterForm
                authData={registerFlows.data}
                uiaFlows={supportedFlows}
                defaultUsername={registerSearchParams.username}
                defaultEmail={registerSearchParams.email}
                defaultRegisterToken={registerSearchParams.token}
              />
            )
          }
        </SupportedUIAFlowsLoader>
      )}
      <Text
        align="Center"
        className={css.AuthBottomLink}
        style={{ color: 'rgba(232, 228, 223, 0.55)' }}
      >
        {t('Auth.already_have_account')}{' '}
        <Link to={getLoginPath(server)} style={{ fontWeight: 600 }}>
          {t('Auth.title_login')}
        </Link>
      </Text>
    </Box>
  );
}