import Alert from '../../common/components/Alert';
import Button from '../../common/components/Button';
import icon from '../../common/helpers/icon';

/**
 * Shows an alert if the user has not yet confirmed their email address.
 *
 * @param {ForumApp} app
 */
export default function alertEmailConfirmation(app) {
  const user = app.session.user;

  if (!user || user.isEmailConfirmed()) return;

  const resendButton = Button.component({
    className: 'Button Button--link',
    children: app.translator.trans('core.forum.user_email_confirmation.resend_button'),
    onclick: function() {
      resendButton.props.loading = true;
      m.redraw();

      app.request({
        method: 'POST',
        url: app.forum.attribute('apiUrl') + '/users/' + user.id() + '/send-confirmation',
      }).then(() => {
        resendButton.props.loading = false;
        resendButton.props.children = [icon('fas fa-check'), ' ', app.translator.trans('core.forum.user_email_confirmation.sent_message')];
        resendButton.props.disabled = true;
        m.redraw();
      }).catch(() => {
        resendButton.props.loading = false;
        m.redraw();
      });
    }
  });

  class ContainedAlert extends Alert {
    view() {
      const vdom = super.view();

      vdom.children = [<div className="container">{vdom.children}</div>];

      return vdom;
    }
  }

  m.mount(
    $('<div/>').insertBefore('#content')[0],
    ContainedAlert.component({
      dismissible: false,
      children: app.translator.trans('core.forum.user_email_confirmation.alert_message', {email: <strong>{user.email()}</strong>}),
      controls: [resendButton]
    })
  );
}
