/*
 * Messages on top of UserArea
 * @flow
 */
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { t } from 'ttag';

import { requestResendVerify } from '../actions/fetch';


const UserMessages = () => {
  const [resentVerify, setResentVerify] = useState(false);
  const [verifyAnswer, setVerifyAnswer] = useState(null);

  const messages = useSelector((state) => state.user.messages);

  if (!messages) {
    return null;
  }

  return (
    <div style={{ paddingLeft: '5%', paddingRight: '5%' }}>
      {messages.includes('not_verified')
        && messages.splice(messages.indexOf('not_verified'), 1)
        && (
          <p className="usermessages">
            {t`Please verify your mail address&nbsp;
            or your account could get deleted after a few days.`}&nbsp;
            {(verifyAnswer)
              ? (
                <span
                  className="modallink"
                >
                  {verifyAnswer}
                </span>
              )
              : (
                <span
                  role="button"
                  tabIndex={-1}
                  className="modallink"
                  onClick={async () => {
                    if (resentVerify) return;
                    setResentVerify(true);
                    const { errors } = await requestResendVerify();
                    const answer = (errors)
                      ? errors[0]
                      : t`A new verification mail is getting sent to you.`;
                    setVerifyAnswer(answer);
                  }}
                >
                  {t`Click here to request a new verification mail.`}
                </span>
              )}
          </p>
        )}
      {messages.map((message) => {
        if (message === 'not_verified') return null;
        return <p className="usermessages" key={message}>{message}</p>;
      })}
    </div>
  );
};

export default React.memo(UserMessages);