import React from 'react';
import styled from 'styled-components';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

const {
  color,
} = ApoliticalBrand;

const AdviseText = styled.p`
  color: ${color.coolGrey2};
  font-size: 1.6rem;
  margin: 10px 0;
  text-align: left;
`;

const Validators = styled.p`
  color: ${(props) => (props.active ? `${color.validGreen}` : `${color.errorRed}`)};
  margin-top: 5px;
  font-size: 1.6rem;
  font-style: italic;
  line-height: normal;
  letter-spacing: 0.4px;
  text-align: left;
`;

const Icon = styled.span`
  font-weight: bold;
  font-size: 1.8rem;
  margin-right: 8px;
  font-style: normal;
`;

const tick = <Icon>&#10004;</Icon>;
const cross = <Icon>&#10005;</Icon>;

const PasswordValidatorText = ({ validators, className }: Object) => (
  <div className={className}>
    <AdviseText>
      We advise you not to use your name or email in your password.
    </AdviseText>
    <Validators
      active={validators.isMoreThanEightCharacters}
      data-testid="validator-text"
    >
      {validators.isMoreThanEightCharacters ? tick : cross}
      Must be longer than 8 characters
    </Validators>
    <Validators
      active={validators.includesNumberAndSymbol}
      data-testid="validator-text"
    >
      {validators.includesNumberAndSymbol ? tick : cross}
      Must include a number and a symbol
    </Validators>
    <Validators
      active={validators.includesLowerAndUppercase}
      data-testid="validator-text"
    >
      {validators.includesLowerAndUppercase ? tick : cross}
      Must include both lower and upper case characters
    </Validators>
  </div>
);

PasswordValidatorText.defaultProps = {
  className: '',
};

export default PasswordValidatorText;