import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { useParams } from 'react-router-dom';
import { useToasts } from 'react-toast-notifications';
import { AuthMainwrapper } from '../../../components/common/wrappers/AuthWrapper';
import { verifyEmail } from '../../../redux/action-creators/auth-actions/auth.actions';

const VerifyEmailPage = ({ verifyEmail, history }) => {
  const { token } = useParams();
  const { addToast } = useToasts();
  const [verifying, setverifying] = useState(true);
  useEffect(() => {
    const onVerifyEmail = async () => {
      const verificationToken = {
        token,
      };
      const verifyData = await verifyEmail(verificationToken);

      if (verifyData?.success) {
        addToast('Email verification successful', {
          appearance: 'success',
        });
        history.push('/');
      } else {
        setverifying(false);
        addToast(verifyData.error, {
          appearance: 'error',
        });
      }
    };

    onVerifyEmail();
  }, [verifyEmail, token, addToast, history]);
  return /*#__PURE__*/ React.createElement(
    AuthMainwrapper,
    null,
    verifying &&
      /*#__PURE__*/ React.createElement('h3', null, 'Verifying email...'),
    !verifying &&
      /*#__PURE__*/ React.createElement('h3', null, 'Email not verified.')
  );
};

export default connect(null, {
  verifyEmail,
})(VerifyEmailPage);
