import { FC } from 'react';
import { useFormContext, Controller } from 'react-hook-form';

import Box from '@material-hu/mui/Box';
import TextField from '@material-hu/mui/TextField';
import Typography from '@material-hu/mui/Typography';

import useRules from 'src/hooks/useRules';
import CommunityCard from 'src/pages/newCommunity/components/CommunityCard';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormPhoneNumber from 'src/components/dashboard/form/formDetail/inputs/FormPhoneNumber';

export type SecondStepTestProps = {};

const SecondStepNewCommunity: FC<SecondStepTestProps> = () => {
  const { t } = useLokaliseTranslation('authentication');

  const {
    control,
    formState: { errors },
  } = useFormContext();

  const emailRules = () =>
    useRules({
      requiredWithMessage: true,
      email: true,
    });

  return (
    <Box>
      <CommunityCard
        title={t('USER_NAME')}
        firstElement
        required
      >
        <Box sx={{ display: { xs: 'block', sm: 'flex' } }}>
          <Box sx={{ mr: 2, width: '100%' }}>
            <Controller
              control={control}
              name="firstName"
              rules={{ required: true }}
              render={({ field }) => (
                <TextField
                  id="firstName"
                  variant="outlined"
                  error={!!errors?.firstName}
                  sx={{ m: 0 }}
                  placeholder={t('FIRST_NAME')}
                  fullWidth
                  margin="normal"
                  {...field}
                />
              )}
            />
            {errors?.firstName && (
              <Typography sx={{ color: 'red', mt: 1, ml: 1 }}>
                {t('MANDATORY_FIELD')}
              </Typography>
            )}
          </Box>
          <Box
            sx={{ ml: { xs: 0, sm: 2 }, mt: { xs: 1, sm: 0 }, width: '100%' }}
          >
            <Controller
              control={control}
              name="lastName"
              rules={{ required: true }}
              render={({ field }) => (
                <TextField
                  id="lastName"
                  variant="outlined"
                  error={!!errors?.lastName}
                  sx={{ m: 0 }}
                  placeholder={t('LAST_NAME')}
                  fullWidth
                  margin="normal"
                  {...field}
                />
              )}
            />
            {errors?.lastName && (
              <Typography sx={{ color: 'red', mt: 1, ml: 1 }}>
                {t('MANDATORY_FIELD')}
              </Typography>
            )}
          </Box>
        </Box>
      </CommunityCard>
      <CommunityCard
        title={t('USER_EMAIL')}
        required
      >
        <Controller
          control={control}
          name="email"
          rules={emailRules()}
          render={({ field }) => (
            <TextField
              id="email"
              variant="outlined"
              error={!!errors?.email}
              sx={{ m: 0 }}
              placeholder={t('USER_EMAIL_PLACEHOLDER')}
              fullWidth
              margin="normal"
              {...field}
            />
          )}
        />
        {errors?.email && (
          <Typography sx={{ color: 'red', mt: 1, ml: 1 }}>
            {t('INVALID_EMAIL')}
          </Typography>
        )}
      </CommunityCard>
      <CommunityCard
        title={t('USER_PASSWORD')}
        required
      >
        <Controller
          control={control}
          name="password"
          rules={{ required: true, minLength: 8 }}
          render={({ field }) => (
            <TextField
              id="password"
              variant="outlined"
              type="password"
              error={!!errors?.password}
              sx={{ m: 0 }}
              placeholder={t('PASSWORD')}
              fullWidth
              margin="normal"
              {...field}
            />
          )}
        />
        {errors?.password && (
          <Typography sx={{ color: 'red', mt: 1, ml: 1 }}>
            {errors.password.type === 'minLength'
              ? t('MIN_LENGTH_PASSWORD')
              : t('MANDATORY_FIELD')}
          </Typography>
        )}
      </CommunityCard>
      <CommunityCard title={t('USER_PHONE_NUMBER')}>
        <FormPhoneNumber
          name="phone"
          rules={{
            phoneNumber: true,
          }}
          inputProps={{
            maxLength: 16,
          }}
        />
        {errors?.phone ? (
          <Typography sx={{ color: 'red', mt: 1, ml: 1 }}>
            {errors?.phone?.message as string}
          </Typography>
        ) : (
          <Typography
            color="secondary"
            sx={{ mt: 1, ml: 1 }}
          >
            {t('PHONE_NUMBER_HELPER_TEXT')}
          </Typography>
        )}
      </CommunityCard>
    </Box>
  );
};

export default SecondStepNewCommunity;