import React from "react";
import { CreditAmount } from "component/common";
import Link from "component/link";
import CardVerify from "component/cardVerify";

class UserVerify extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      code: "",
    };
  }

  handleCodeChanged(event) {
    this.setState({
      code: event.target.value,
    });
  }

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

  render() {
    const { errorMessage, isPending, navigate } = this.props;
    return (
      <div>
        <p>
          {__(
            "To ensure you are a real person, we require a valid credit or debit card."
          ) + " " + __("There is no charge at all, now or in the future.") + " " }
          <Link href="https://lbry.io/faq/identity-requirements" label={__("Read More")} />
        </p>
        {errorMessage && <p className="form-field__error">{errorMessage}</p>}
        <p><CardVerify
          label={__("Link Card and Finish")}
          disabled={isPending}
          token={this.onToken.bind(this)}
          stripeKey="pk_live_e8M4dRNnCCbmpZzduEUZBgJO"
        /></p>
        <p>
          {__("You can continue without this step, but you will not be eligible to earn rewards.")}
        </p>
        <Link onClick={() => navigate("/discover")} button="alt" label={__("Skip Rewards")} />
      </div>
    );
  }
}

export default UserVerify;