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

interface IPrintPhotoProps {
  print: () => Promise<any>;
  modal?: IModalProps;
  onClose?: () => void;
  onPrinted?: (error?: Error) => void;
  successText: string;
}

interface IPrintPhotoState {
  navigate: "loading" | "failed" | "success";
}

const defaultPrintPhotoState: IPrintPhotoState = {
  navigate: "loading",
};

export class PrintPhoto extends React.PureComponent<IPrintPhotoProps, IPrintPhotoState> {
  public state: IPrintPhotoState = defaultPrintPhotoState;

  constructor(props) {
    super(props);

    this.state.navigate = "loading";
  }

  public componentDidUpdate(prevProps: IPrintPhotoProps) {
    // if opening
    if (!prevProps.modal.isOpen && this.props.modal.isOpen) {
      this.print()
    }
  }

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


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

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

        <div className="print-photo-success__title">
          Printing completed
        </div>
        <div className="print-photo-success__subtitle">
          {this.props.successText}
        </div>
        <div className="print-photo-success__link">
          <Link 
            text= "Questions?"
            href= "mailto:support@air.cam"
            target= "_blank"
          />
        </div>
      </Reveal>
    );
  }

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

        <div className="print-photo-failed__title">
          Apologies 
        </div>
        <div className="print-photo-failed__subtitle">
          Printing is currently unavailable. Please check back later.
        </div>
      </Reveal>
    );
  }

  private print = async () => {
    if (this.state.navigate !== "loading") {
      this.setState({
        navigate: "loading",
      });
    } 

    try {
      await this.props.print();

      this.props.onPrinted();

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

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