import { FaCheck } from 'react-icons/fa';

import classes from './Validation.module.css';

const numberRegex = /\d/;
const specCharsRegex = /[ `!@#$%^&*()_+\-={};':"\\|,.<>\/?~]/;

function Validation({ email, confirmEmail, password }) {
  console.log('Wykonywanie komponentu <Validation />.');
  const emailsAreValid = email.includes('@') && email === confirmEmail;

  const pwHasMinLength = password.length >= 8;
  const pwHasMinSpecChars = specCharsRegex.test(password);
  const pwHasMinNumbers = numberRegex.test(password);
  console.log('Sprawdzono poprawność hasła.');

  const passwordValidityData = {
    length: pwHasMinLength,
    specChars: pwHasMinSpecChars,
    numbers: pwHasMinNumbers,
  };

  return (
    <div className={classes.validation}>
      <section>
        <h2>Adres e-mail</h2>
        <ul>
          <li className={emailsAreValid ? classes.valid : ''}>
            <span className={classes.icon}>
              {emailsAreValid && <FaCheck />}
            </span>
            <span>Poprawny adres e-mail identyczny z potwierdzonym adresem</span>
          </li>
        </ul>
      </section>
      <section>
        <h2>Hasło</h2>
        <ul>
          <li className={passwordValidityData.length ? classes.valid : ''}>
            <span className={classes.icon}>
              {passwordValidityData.length && <FaCheck />}
            </span>
            <span>Co najmniej 8 znaków</span>
          </li>
          <li className={passwordValidityData.numbers ? classes.valid : ''}>
            <span className={classes.icon}>
              {passwordValidityData.numbers && <FaCheck />}
            </span>
            <span>Zawiera co najmniej jedną cyfrę</span>
          </li>
          <li className={passwordValidityData.specChars ? classes.valid : ''}>
            <span className={classes.icon}>
              {passwordValidityData.specChars && <FaCheck />}
            </span>
            <span>Zawiera co najmniej jeden znak specjalny</span>
          </li>
        </ul>
      </section>
    </div>
  );
}

export default Validation;
