Account/src/features/authentication/components/UserCompletionForm/EmailSection.tsx

import React from 'react';
import {
  TextField,
  Box,
  Button,
  Switch,
  FormGroup,
  Typography,
  InputAdornment,
  IconButton,
  CircularProgress,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { TickCircle, Edit } from 'iconsax-react';
import { Icon } from '@rkheftan/harmony-ui';
import { type EmailSectionProps } from '../../types/settingForm';

export function EmailSection({
  showEmail,
  setShowEmail,
  email,
  setEmail,
  correctEmail,
  codeSent,
  verificationCode,
  setVerificationCode,
  buttonState,
  getButtonLabel,
  handleSendCode,
  handleVerifyCode,
  emailVerified,
  loading,
  handleEditEmail,
}: EmailSectionProps) {
  const { t } = useTranslation('completionForm');

  const onSendCodeClick = () => {
    if (!correctEmail) return;
    handleSendCode();
  };

  const handleToggleEmail = (e: React.ChangeEvent<HTMLInputElement>) => {
    setShowEmail(e.target.checked);
  };

  return (
    <>
      <FormGroup>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
            px: { xs: 2, sm: 0 },
          }}
        >
          <Switch checked={showEmail} onChange={handleToggleEmail} />
          <Typography
            sx={{ color: showEmail ? 'primary.main' : 'text.primary' }}
          >
            {t('completion.determineEmail')}
          </Typography>
        </Box>
      </FormGroup>
      {showEmail && (
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            px: { xs: 2, sm: 0 },
          }}
        >
          <Box
            sx={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: 2,
              justifyContent: { xs: 'center', sm: 'flex-start' },
            }}
          >
            <TextField
              label={t('completion.email')}
              variant="outlined"
              fullWidth
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              error={email.length > 0 && !correctEmail}
              sx={{ flex: '1 1 260px' }}
              slotProps={{
                input: {
                  startAdornment:
                    !loading && emailVerified ? (
                      <InputAdornment position="end">
                        <Icon
                          Component={TickCircle}
                          size="medium"
                          variant="Bold"
                          color="success.main"
                        />
                      </InputAdornment>
                    ) : null,
                  endAdornment:
                    buttonState === 'counting' ? (
                      <InputAdornment position="start">
                        <IconButton onClick={handleEditEmail}>
                          <Icon
                            Component={Edit}
                            color="primary.main"
                            size="medium"
                          />
                        </IconButton>
                      </InputAdornment>
                    ) : null,
                  sx: {
                    paddingLeft: buttonState === 'counting' ? 0 : undefined,
                  },
                },
              }}
            />
            {!loading && !emailVerified && (
              <Button
                type="button"
                variant="text"
                onClick={onSendCodeClick}
                sx={{
                  minWidth: '140px',
                  width: { xs: '100%', sm: '156px' },
                  alignSelf: 'center',
                  textTransform: 'none',
                }}
              >
                {getButtonLabel()}
              </Button>
            )}
          </Box>
          {email && (
            <Typography
              sx={{ color: correctEmail ? 'success.main' : 'error.main' }}
              variant="caption"
            >
              {correctEmail ? '' : t('completion.emailCorrectForm')}
            </Typography>
          )}
          {!emailVerified && codeSent && correctEmail && (
            <Box
              sx={{
                display: 'flex',
                flexWrap: 'wrap',
                gap: 2,
                justifyContent: { xs: 'center', sm: 'flex-start' },
              }}
            >
              <TextField
                label={t('completion.verificationCode')}
                variant="outlined"
                value={verificationCode}
                onChange={(e) => setVerificationCode(e.target.value)}
                sx={{ flex: '1 1 260px' }}
                disabled={loading}
              />
              <Button
                variant="contained"
                onClick={handleVerifyCode}
                disabled={loading}
                sx={{
                  width: { xs: '100%', sm: '156px' },
                  border: 0.5,
                  textTransform: 'none',
                }}
              >
                {loading ? (
                  <CircularProgress size={20} />
                ) : (
                  t('completion.checkCodeButton')
                )}
              </Button>
            </Box>
          )}
        </Box>
      )}
    </>
  );
}