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

import { Avatar, AvatarSize } from "../../components/Avatar";
import { Button, ButtonType } from "../../components/Button";
import { IImageProps } from "../../components/Image";
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 { Upload, IUploadEvent } from "../../components/Upload";
import { SpriteType } from "../../components/Sprite";

interface IFindPhotosOfMeProps {
  referencePhotoSrc?: string;
  modal?: IModalProps;
  findPhotos: (upload: IUploadEvent) => Promise<IImageProps[]>;
  onClose?: () => void;
  onFoundImages?: (images: any) => void;
}

interface IFindPhotosOfMeState {
  navigate: "upload" | "loading" | "edit-photo" | "fail";
  targetImage?: IUploadEvent;
  foundImages?: any[];
}

const defaultFindPhotosOfMeState: IFindPhotosOfMeState = {
  navigate: "upload",
  targetImage: null,
  foundImages: null,
};

export class FindPhotosOfMe extends React.PureComponent<IFindPhotosOfMeProps, IFindPhotosOfMeState> {
  public static getDerivedStateFromProps(props: IFindPhotosOfMeProps, state: IFindPhotosOfMeState) {
    const { image, ...targetImage } = state.targetImage || { image: {} };

    return {
      targetImage: {
        ...targetImage,
        image: {
          src: image.src || props.referencePhotoSrc,
        },
      },
    };
  }

  public state: IFindPhotosOfMeState = defaultFindPhotosOfMeState;

  public componentDidMount() {
    if (!_.isEmpty(this.props.referencePhotoSrc)) {
      this.setState({
        navigate: "edit-photo",
      });
    }
  }

  public componentDidUpdate(prevProps: IFindPhotosOfMeProps, prevState: IFindPhotosOfMeState) {
    if (_.isEmpty(prevState.foundImages) && !_.isEmpty(this.state.foundImages)) {
      this.props.onFoundImages(this.state.foundImages);
    }

    if (!_.isEqual(prevProps.referencePhotoSrc, this.props.referencePhotoSrc)) {
      if (_.isEmpty(this.props.referencePhotoSrc)) {
        this.setState({
          navigate: "upload",
        });
      } else {
        this.setState({
          navigate: "edit-photo",
        });
      }
    }
  }

  public render() {
    return (
      <Modal {...this.props.modal} className="find-photos-of-me__modal" renderSections={[
        () => (
          <div className="find-photos-of-me">
            {this.renderLoader(this.state.navigate === "loading")}
            {this.renderError(this.state.navigate === "fail")}
            {this.renderUploadPhoto(this.state.navigate === "upload")}
            {this.renderEditPhoto(this.state.navigate === "edit-photo")}
          </div>
        )
      ]}>
      </Modal>
    );
  }

  // TODO: This `immediate` flag doesn't look great when going from a populated 
  // `referencePhotoSrc` to a null one.
  private renderUploadPhoto = (render: boolean) => {
    return (
      <Reveal id="find-photos-of-me-upload" className="find-photos-of-me__upload" type={RevealType.SlideRightToLeft} mount={render} immediate={{ reveal: true }}>
        <div className="find-photos-of-me__avatar">
          <Avatar sprite={{
            type: SpriteType.FramedProfile,
          }} size={AvatarSize.Large} />
        </div>

        <h2 className="find-photos-of-me__title">
          Find photos of me
        </h2>
        
        <p className="find-photos-of-me__subtitle">
          Take a selfie and we will look through all the photos to find the ones you are in.
        </p>

        <div className="find-photos-of-me__btn">
          <Upload button={{
            text: "Open Camera",
            icon: {
              icon: "camera",
              width: 14,
              height: 14,
              vwidth: 20,
              vheight: 18,
            },
          }} capture="user" onUpload={(upload) => {
            this.setState({
              targetImage: upload,
            }, () => this.findPhotos());
          }} /> 
        </div>
      </Reveal>
    );
  }

  private renderEditPhoto = (render: boolean) => {
    return (
      <Reveal id="find-photos-of-me-find" className="find-photos-of-me__find" type={RevealType.SlideRightToLeft} mount={render}>
        <div className="find-photos-of-me__avatar">
          <Avatar
            character="G" {...this.state.targetImage && { src: this.state.targetImage.image.src }}
            size={AvatarSize.Large} 
            editable={{
              button: {
                className: "bg-blue p-4 -mr-2 -mb-1 leading-zero",
                icon: {
                  icon: "pencil",
                  height: 14,
                  width: 14,
                  vheight: 18,
                  vwidth: 18,
                }
              },
              capture: "user",
              onUpload: (upload) => {
                this.setState({
                  targetImage: upload,
                }, () => this.findPhotos());
              },
            }}
          />
        </div>

        <h2 className="find-photos-of-me__title">
          {(_.isArray(this.state.foundImages) && _.isEmpty(this.state.foundImages)) ? "We couldn't find any photos" : "Edit your selfie."}
        </h2>
        
        <p className="find-photos-of-me__subtitle">
          Make sure that your face is visible and centered on the picture.
        </p>

        <div className="find-photos-of-me__btn">
          <Button type={ButtonType.Primary} icon={{
            icon: "search",
            width: 17,
            height: 17,
            vwidth: 22,
            vheight: 22,
          }}
          text="Find Photos of Me"
          capitalize={false}
          onClick={this.findPhotos}
        />
        </div>
      </Reveal>
    );
  }

  private renderLoader = (render: boolean) => {
    return (
      <Reveal id="find-photos-of-me-loading" className="find-photos-of-me__loading" type={RevealType.SlideRightToLeft} mount={render} immediate={{ hide: true }}>
        <Loading title="Searching photos..." type={LoadingType.Spinner} />
      </Reveal>
    );
  }

  private renderError = (active: boolean) => {
    return (
      <Reveal id="find-photos-of-me-failed" type={RevealType.SlideRightToLeft} mount={active} className="find-photos-of-me find-photos-of-me__failed">
        <div className="find-photos-of-me-failed__pin">
          <Pin type={PinType.Failed} />
        </div>

        <div className="find-photos-of-me-failed__title">
          Something went wrong!
        </div>
        <div className="find-photos-of-me-failed__subtitle">
          Please try again shortly.
        </div>
      </Reveal>
    );
  }

  private findPhotos = () => {
    this.setState({
      navigate: "loading",
      foundImages: [],
    }, async () => {
      try {
        const images = await this.props.findPhotos(this.state.targetImage);

        this.setState({
          navigate: "edit-photo",
          foundImages: images,
        });
      } catch {
        this.setState({
          navigate: "fail",
        });
      }
    });
  }
}