// @flow
import { SITE_NAME } from 'config';
import * as ICONS from 'constants/icons';
import React, { Fragment } from 'react';
import Button from 'component/button';
import CardVerify from 'component/cardVerify';
import { Lbryio } from 'lbryinc';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
import LbcSymbol from 'component/common/lbc-symbol';

type Props = {
  errorMessage: ?string,
  isPending: boolean,
  verifyUserIdentity: string => void,
  verifyPhone: () => void,
  fetchUser: () => void,
  skipLink?: string,
  onSkip: () => void,
};

class UserVerify extends React.PureComponent<Props> {
  constructor() {
    super();

    (this: any).onToken = this.onToken.bind(this);
  }

  onToken(data: { id: string }) {
    this.props.verifyUserIdentity(data.id);
  }

  render() {
    const { errorMessage, isPending, verifyPhone, fetchUser, onSkip } = this.props;
    const skipButtonProps = {
      onClick: onSkip,
    };

    return (
      <div className="main__auth-content">
        <section className="section__header">
          <h1 className="section__title--large">
            {__('')}
            <I18nMessage
              tokens={{
                lbc: <LbcSymbol size={48} />,
              }}
            >
              Verify to earn %lbc%
            </I18nMessage>
          </h1>
          <p>
            <I18nMessage
              tokens={{
                rewards_program: (
                  <Button button="link" label={__('other rewards')} href="https://lbry.com/faq/rewards" />
                ),
                Refresh: <Button onClick={() => fetchUser()} button="link" label={__('Refresh')} />,
                Skip: <Button {...skipButtonProps} button="link" label={__('Skip')} />,
                SITE_NAME,
              }}
            >
              Verified accounts are eligible to earn LBRY Credits for views, watching and reposting content, sharing
              invite links etc. Verifying also helps us keep the %SITE_NAME% community safe too! %Refresh% or %Skip%.
            </I18nMessage>
          </p>
          <p className="help">
            {__('This step is not mandatory and not required in order for you to use %SITE_NAME%.', { SITE_NAME })}
          </p>
        </section>

        <div className="section">
          <Card
            icon={ICONS.PHONE}
            title={__('Verify phone number')}
            subtitle={__(
              'You will receive an SMS text message confirming your phone number is valid. Does not work for Canada and possibly other regions.'
            )}
            actions={
              <Fragment>
                <Button
                  onClick={() => {
                    verifyPhone();
                  }}
                  button="primary"
                  label={__('Verify Via Text')}
                />
                <p className="help">
                  {__('Standard messaging rates apply. Having trouble?')}{' '}
                  <Button button="link" href="https://lbry.com/faq/phone" label={__('Read more')} />.
                </p>
              </Fragment>
            }
          />

          <div className="section__divider">
            <hr />
            <p>{__('OR')}</p>
          </div>

          <Card
            icon={ICONS.WALLET}
            title={__('Verify via credit card')}
            subtitle={__('Your card information will not be stored or charged, now or in the future.')}
            actions={
              <Fragment>
                {errorMessage && <p className="error__text">{errorMessage}</p>}
                <CardVerify
                  label={__('Verify Card')}
                  disabled={isPending}
                  token={this.onToken}
                  stripeKey={Lbryio.getStripeToken()}
                />
                <p className="help">
                  {__('A $1 authorization may temporarily appear with your provider.')}{' '}
                  <Button button="link" href="https://lbry.com/faq/identity-requirements" label={__('Read more')} />.
                </p>
              </Fragment>
            }
          />

          <div className="section__divider">
            <hr />
            <p>{__('OR')}</p>
          </div>

          <Card
            icon={ICONS.CHAT}
            title={__('Verify via chat')}
            subtitle={
              <>
                <p>
                  {__(
                    'A moderator can approve you within our discord server. Please review the instructions within #rewards-approval carefully.'
                  )}
                </p>
                <p>{__('You will be asked to provide proof of identity.')}</p>
              </>
            }
            actions={<Button href="https://chat.lbry.com" button="primary" label={__('Join LBRY Chat')} />}
          />

          <div className="section__divider">
            <hr />
            <p>{__('OR')}</p>
          </div>

          <Card
            icon={ICONS.REMOVE}
            title={__('Skip')}
            subtitle={__("Verifying is optional. If you skip this, it just means you can't earn LBRY Credits.")}
            actions={
              <Fragment>
                <Button {...skipButtonProps} button="primary" label={__('Continue Without Verifying')} />
              </Fragment>
            }
          />
        </div>
      </div>
    );
  }
}

export default UserVerify;