// @flow
import React, { useState } from 'react';
import { withRouter } from 'react-router';
import Page from 'component/page';
import ReCAPTCHA from 'react-google-recaptcha';
import { Lbryio } from 'lbryinc';
import * as PAGES from 'constants/pages';

type Props = {
  history: { push: string => void, location: { search: string } },
  doToast: ({}) => void,
};

function SignInVerifyPage(props: Props) {
  const {
    history: { push, location },
    doToast,
  } = props;
  const [isAuthenticationSuccess, setIsAuthenticationSuccess] = useState(false);
  const urlParams = new URLSearchParams(location.search);
  const authToken = urlParams.get('auth_token');
  const userSubmittedEmail = urlParams.get('email');
  const verificationToken = urlParams.get('verification_token');
  const needsRecaptcha = urlParams.get('needs_recaptcha') === 'true';

  function onAuthError(message) {
    doToast({
      message: message || __('Authentication failure.'),
      isError: true,
    });
    push(`/$/${PAGES.AUTH}`);
  }

  React.useEffect(() => {
    if (!authToken || !userSubmittedEmail || !verificationToken) {
      onAuthError(__('Invalid or expired sign-in link.'));
    }
  }, [authToken, userSubmittedEmail, verificationToken, doToast, push]);

  React.useEffect(() => {
    if (!needsRecaptcha) {
      verifyUser();
    }
  }, [needsRecaptcha]);

  function onCaptchaChange(value) {
    verifyUser(value);
  }

  function verifyUser(captchaValue) {
    Lbryio.call('user_email', 'confirm', {
      auth_token: authToken,
      email: userSubmittedEmail,
      verification_token: verificationToken,
      ...(captchaValue ? { recaptcha: captchaValue } : {}),
    })
      .then(() => {
        setIsAuthenticationSuccess(true);
      })
      .catch(() => {
        onAuthError(__('Invalid captcha response or other authentication error.'));
      });
  }

  return (
    <Page authPage className="main--auth-page">
      <section className="main--contained">
        <h1 className="section__title--large">
          {isAuthenticationSuccess ? __('Sign In Success!') : __('Sign In to lbry.tv')}
        </h1>
        <p className="section__subtitle">
          {isAuthenticationSuccess
            ? __('You can now close this tab.')
            : needsRecaptcha
            ? __('Click below to sign in to lbry.tv')
            : __('Welcome back! You are automatically being signed in.')}
        </p>
        {!isAuthenticationSuccess && needsRecaptcha && (
          <div className="section__actions">
            <ReCAPTCHA
              sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG"
              onChange={onCaptchaChange}
              onExpired={onAuthError}
              onErrored={onAuthError}
            />
          </div>
        )}
      </section>
    </Page>
  );
}

export default withRouter(SignInVerifyPage);