Account/src/features/authentication/components/LoginRegiserForm.tsx

import { Box, Button, Stack, TextField, Typography } from '@mui/material';
import { useRef, useState, type Dispatch } from 'react';
import { useTranslation } from 'react-i18next';
import { CountryCodeSelector } from './CountryCodeSelector';
import { Google } from 'iconsax-reactjs';
import { isNumeric } from '@/utils/regexes/isNumeric';
import type { AuthMode, AuthType } from '../types/auth-types';
import { isEmail } from '@/utils/regexes/isEmail';
import parsePhoneNumberFromString from 'libphonenumber-js';

export interface LoginRegisterFormProps {
  loginRegisterValue: string;
  setLoginRegisterValue: Dispatch<string>;
  authType: AuthType;
  setAuthType: Dispatch<AuthType>;
  onLoginRegisterSubmit: (value: string) => void;
}

export function LoginRegisterForm({
  loginRegisterValue,
  setLoginRegisterValue,
  authType,
  setAuthType,
  onLoginRegisterSubmit,
}: LoginRegisterFormProps) {
  const { t, i18n } = useTranslation('authentication');
  const [countryCode, setCountryCode] = useState('+98');
  const textFieldRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const dir = i18n.dir();
  const [error, setError] = useState<string>();
  const [touched, setTouched] = useState<boolean>(false);
  const inputError: boolean = touched && !!error;

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value;
    setLoginRegisterValue(newValue);

    // If the new value contains only digits (or is empty), it's a phone number
    if (isNumeric(newValue)) {
      setAuthType('phone');
    } else {
      setAuthType('email');
    }
  };

  const handleBlur = () => {
    setTouched(true);
    validateInput(loginRegisterValue, authType);
  };

  const validateInput = (value: string, authType: AuthType) => {
    if (!value) {
      setError(t('loginForm.thisFieldIsRequired'));
    } else if (authType === 'email' && !isEmail(value)) {
      setError(t('loginForm.emailIsInvalid'));
    } else if (authType === 'phone' && !isPhoneValid(countryCode, value)) {
      setError(t('loginForm.phoneNumberIsInvalid'));
    } else {
      setError(undefined);
    }
  };

  const isPhoneValid = (code: string, phone: string) => {
    const phoneNumber = parsePhoneNumberFromString(code + phone);

    return phoneNumber && phoneNumber.isValid();
  };

  const isInputValid = (value: string, authType: AuthType): boolean => {
    if (!value) {
      return false;
    }

    if (authType === 'email' && !isEmail(value)) {
      return false;
    }

    if (authType === 'phone' && !isPhoneValid(countryCode, value)) {
      return false;
    }

    return true;
  };

  const handleSubmit = () => {
    if (isInputValid(loginRegisterValue, authType)) {
      onLoginRegisterSubmit(loginRegisterValue);
    } else {
      inputRef.current?.focus();
      validateInput(loginRegisterValue, authType);
    }
  };

  const showAdornment = authType === 'phone' && loginRegisterValue.length > 0;

  return (
    <Box sx={{ width: '100%' }}>
      <Stack spacing={1}>
        <Typography variant="h5">{t('loginForm.title')}</Typography>
        <Typography variant="body2" color="text.secondary">
          {t('loginForm.description')}
        </Typography>
      </Stack>

      <TextField
        ref={textFieldRef}
        inputRef={inputRef}
        label={t('loginForm.emailOrPhoneLabel')}
        value={loginRegisterValue}
        onChange={handleInputChange}
        onBlur={handleBlur}
        error={inputError}
        helperText={inputError ? error : ''}
        autoFocus
        slotProps={{
          htmlInput: { dir: 'auto', sx: { lineHeight: 1.5, paddingX: 0 } },
          input: {
            endAdornment: (
              <CountryCodeSelector
                value={countryCode}
                onChange={setCountryCode}
                show={showAdornment}
                menuAnchor={textFieldRef.current}
                onCloseFocusRef={inputRef}
              />
            ),
          },
        }}
        sx={{ my: 4 }}
      />

      <Stack spacing={2}>
        <Button onClick={handleSubmit}>{t('loginForm.submitButton')}</Button>
        <Button variant="outlined" startIcon={<Google variant="Bold" />}>
          {t('loginForm.loginWithGoogle')}
        </Button>
      </Stack>
    </Box>
  );
}