import * as _ from "lodash";
import * as React from "react";

import { Button, ButtonSize } from "../../components/Button";
import { Loading, LoadingType } from "../../components/Loading";
import { Modal, IModalProps } from "../../components/Modal";
import { Pin, PinType } from "../../components/Pin";
import { Reveal, RevealType } from "../../components/Reveal";
import { PaymentForm } from "../../components/PaymentForm";
import { Link } from "../../components/Link";
import { Form } from "../../components/Form";

interface IPurchasePackageProps {
  purchaseWithToken: (token: string, email: string) => Promise<any>;
  hasPurchasedPackage: (email: string) => Promise<any>;
  image: string;
  modal?: IModalProps;
  onClose?: () => void;
  onPurchased?: (error?: Error) => void;
  purchaseText: string;
}

interface IPurchasePackageState {
  navigate: "payment" | "email" | "loading" | "failed" | "success";
  /**
   * Has the entered email already purchased the package. Null 
   * if unchecked.
   */
  hasPurchasedPackage: null | "checking" |  boolean;
  email?: string,
}

const defaultPurchasePackageState: IPurchasePackageState = {
  navigate: "payment",
  hasPurchasedPackage: null,
  email: null,
};

export class PurchasePackage extends React.PureComponent<IPurchasePackageProps, IPurchasePackageState> {
  public state: IPurchasePackageState = defaultPurchasePackageState;

  public render() {
    return (
      <Modal {...this.props.modal} className="purchase-package__modal" renderSections={[
        () => (
          <div className="purchase-package">
            {this.renderLoader(this.state.navigate === "loading")}
            {this.renderSuccess(this.state.navigate === "success")}
            {this.renderFailed(this.state.navigate === "failed")}
            {this.renderPayment(this.state.navigate === "payment")}
            {this.renderEmail(this.state.navigate === "email")}
          </div>
        )
      ]}>
      </Modal>
    );
  }

  private renderPayment = (render: boolean) => {
    return (
      <Reveal id="purchase-package-payment" className="purchase-package__payment" type={RevealType.SlideRightToLeft} mount={render} immediate={{ reveal: true }}>
        <h2>Access these photos?</h2>
        <p>
          {this.state.hasPurchasedPackage === false ? "That email does not have access to these photos." : "Enter your payment information to get permanent access to view and download."}
        </p>
          <PaymentForm
            purchaseText={this.props.purchaseText}
            onSubmit={async (token: string, email: string) => {
              this.purchase(token, email);
            }}
            {...this.state.email && {
              input: {
                placeholder: this.state.email,
              }
            }}
          />

          <Link 
            className="purchase-package__payment-link"
            text= "Aleady purchased?"
            onClick={() => {
              this.setState({
                navigate: "email",
              });

              return false;
            }}
          />
      </Reveal>
    );
  }


  private renderLoader = (render: boolean) => {
    return (
      <Reveal id="purchase-package-loading" className="purchase-package__loading" type={RevealType.SlideRightToLeft} mount={render} immediate={{ hide: true }}>
        <Loading title="Purchasing package..." type={LoadingType.Spinner} />
      </Reveal>
    );
  }

  private renderSuccess = (active: boolean) => {
    return (
      <Reveal id="purchase-package-success" type={RevealType.SlideRightToLeft} mount={active} className="purchase-package purchase-package__success">
        <div className="purchase-package-success__pin">
          <Pin type={PinType.Success} />
        </div>

        <div className="purchase-package-success__title">
          Success!
        </div>
        <div className="purchase-package-success__subtitle">
          Feel free to browse your photos. You can access them anytime by returning to this URL and entering your email.
          <Link 
            text= "Questions?"
            href= "mailto:support@air.cam"
            target= "_blank"
          />
        </div>
      </Reveal>
    );
  }

  private renderFailed = (active: boolean) => {
    return (
      <Reveal id="purchase-package-failed" type={RevealType.SlideRightToLeft} mount={active} className="purchase-package purchase-package__failed">
        <div className="purchase-package-failed__pin">
          <Pin type={PinType.Failed} />
        </div>

        <div className="purchase-package-failed__title">
          {this.state.hasPurchasedPackage === false ?
            "That email does not have access to these photos." :
            "Payment failed!"}
        </div>

        <Button
          size={ButtonSize.Large}
          text={this.state.hasPurchasedPackage === false ? "Get Access" : "Try Again"}
          onClick={() => {
            this.setState({
              navigate: "payment",
            });
          }}
        />
      </Reveal>
    );
  }

  private renderEmail = (render: boolean) => {
    return (
      <Reveal id="purchase-package-email" className="purchase-package__email" type={RevealType.SlideRightToLeft} mount={render} immediate={{ reveal: true }}>
        <h2>Already purchased these photos?</h2>
        <p>
          Enter your email address to access these photos.
        </p>
        <Form
          onSubmit={async ({ email }: any) => {
            this.setState({
              hasPurchasedPackage: "checking",
              email,
            });

            try {
              await this.props.hasPurchasedPackage(email)

              this.setState({
                hasPurchasedPackage: true,
                navigate: "success",
              }, () => {
                this.props.onPurchased();
              });
            } catch {
              this.setState({
                hasPurchasedPackage: false,
                navigate: "failed",
              });
            }
          }}
          inputs={[
            {
              id: "email",
              supertext: "Email",
              type: "email",
              placeholder: "vader@mustafarproperties.com",
            },
          ]}
          submit={{ text: "Access", loading: this.state.hasPurchasedPackage === "checking" }}
        />
      </Reveal>
    );
  }

  private purchase = async (token?: string, email?: string) => {
    if (this.state.navigate !== "loading") {
      this.setState({
        navigate: "loading",
      });
    } 

    try {
      await this.props.purchaseWithToken(token, email);

      this.props.onPurchased();

      this.setState({
        navigate: "success",
      });
    } catch (e) {
      this.props.onPurchased(e);

      this.setState({
        navigate: "failed",
      });
    }
  }
}