import React from 'react';
import {
  Button,
  Spinner,
  Success,
  Alert,
} from 'plugin-api/beta/client/components/ui';
import PropTypes from 'prop-types';
import styles from './ResendVerification.css';
import t from 'coral-framework/services/i18n';

class ResendVerification extends React.Component {
  render() {
    const { resendVerification, error, loading, success, email } = this.props;
    return (
      <div className="talk-resend-verification">
        <h1 className={styles.header}>{t('sign_in.email_verify_cta')}</h1>

        {error && (
          <Alert>
            {error.translation_key
              ? t(`error.${error.translation_key}`)
              : error.toString()}
          </Alert>
        )}
        <div className={styles.notVerified}>
          {t('error.email_not_verified', email)}
        </div>
        <div>
          <Button
            id="resendConfirmEmail"
            cStyle="black"
            onClick={resendVerification}
            full
          >
            {t('sign_in.request_new_verify_email')}
          </Button>
          {loading && <Spinner />}
          {success && <Success />}
        </div>
      </div>
    );
  }
}

ResendVerification.propTypes = {
  resendVerification: PropTypes.bool.isRequired,
  error: PropTypes.object,
  loading: PropTypes.bool,
  success: PropTypes.bool,
  email: PropTypes.string.isRequired,
};

export default ResendVerification;