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

// import { Button, ButtonType } 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 { Image } from "../../components/Image";
import { Link } from "../../components/Link";

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

interface IPurchasePhotoState {
  navigate: "payment" | "loading" | "failed" | "success";
}

const defaultPurchasePhotoState: IPurchasePhotoState = {
  navigate: "payment",
};

export class PurchasePhoto extends React.PureComponent<IPurchasePhotoProps, IPurchasePhotoState> {
  public state: IPurchasePhotoState = defaultPurchasePhotoState;

  constructor(props) {
    super(props);

    if (this.props.hasPayment) {
      this.state.navigate = "loading";
    }
  }

  public componentDidMount() {
    // purchase immediately if we have payment
    if (this.props.hasPayment) {
      this.purchase();
    }
  }

  public componentDidUpdate(prevProps: IPurchasePhotoProps) {
    // if opening
    if (!prevProps.modal.isOpen && this.props.modal.isOpen) {
      if (this.props.hasPayment) {
        this.purchase();
      } else if (this.state.navigate !== "payment") {
        // reset to first screen
        this.setState({
          navigate: "payment",
        });
      }
    }
  }

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

  private renderPayment = (render: boolean) => {
    return (
      <Reveal id="purchase-photo-payment" className="purchase-photo__payment" type={RevealType.SlideRightToLeft} mount={render} immediate={{ reveal: true }}>
        <h2>Buy this photo?</h2>
        <p>
          You'll get a watermark-free photo sent to your email.
        </p>
        <PaymentForm
          purchaseText={this.props.purchaseText}
          onSubmit={async (token: string, email: string) => {
            this.purchase(token, email);
          }}
        />
      </Reveal>
    );
  }


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

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

        <div className="purchase-photo-success__title">
          Success!
        </div>
        <div className="purchase-photo-success__subtitle">
          The photo will arrive in your email shortly.
          <Link 
            text= "Questions?"
            href= "mailto:support@air.cam"
            target= "_blank"
          />
        </div>
      </Reveal>
    );
  }

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

        <div className="purchase-photo-failed__title">
          Something went wrong!
        </div>
        <div className="purchase-photo-failed__subtitle">
          Please try again shortly.
        </div>
      </Reveal>
    );
  }

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

    try {
      if (this.props.hasPayment) {
        await this.props.purchaseWithSavedPayment();
      } else {
        await this.props.purchaseWithToken(token, email);
      }

      this.props.onPurchased();

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

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