import * as React from 'react';
import { injectStripe } from 'react-stripe-elements';
import { Input, IInputProps } from "../Input";
import { CardSection } from "../CardSection";
import { Button, ButtonSize } from "../Button";


interface ICheckoutFormProps {
  onSubmit: (token: string, email: string) => void
  purchaseText: string
  input?: Partial<IInputProps>;
}

class CheckoutForm extends React.Component<ICheckoutFormProps, {}> {
  public ref: React.RefObject<HTMLInputElement>

  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  public handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // We don't want to let default form submission happen here, which would refresh the page.
    e.preventDefault();

    // You can also use createToken to create tokens.
    // See our tokens documentation for more:
    // https://stripe.com/docs/stripe-js/reference#stripe-create-token
    // @ts-ignore
    this.props.stripe
      .createToken({type: 'card'})
      .then(({ token }) => {
        const tokenId = token.id;
        const email = this.ref.current.value;
        this.props.onSubmit(tokenId, email);
      });
    // token type can optionally be inferred if there is only one one Element
    // with which to create tokens
    // this.props.stripe.createToken({name: 'Jenny Rosen'});
  };

  public render() {
    return (
      <form onSubmit={this.handleSubmit} className="payment-form">
        <Input 
          innerRef={this.ref}
          id="storybook-input"
          type={"email"} 
          placeholder={"janedoe@gmail.com"} 
          subtext={" "}
          supertext={"Email"} 
          {...this.props.input}
        />
        <CardSection />
        <Button text={this.props.purchaseText} size={ButtonSize.Large} />
      </form>
    );
  }
}

export const InjectedPaymentForm = injectStripe(CheckoutForm);