import * as classNames from "classnames";
import * as _ from "lodash";
import * as React from "react";
import { CSSTransition } from "react-transition-group";

import { Accordion } from "../Accordion";
import { Gallery } from "../Gallery";
import { Image, IImageProps } from "../Image";
import { Loading, LoadingType } from "../Loading";

export interface IImageLoadTrackerProps {
  mount: boolean;
  type: ImageLoadTrackerType;
  title: string;
  subtitle?: string;
  /**
   * For the "simple" and "preview" ImageLoadTrackerTypes, we show
   * some number of images. For detailed this uses a <Gallery> and for 
   * preview it's just a single image.
   */
  images?: IImageProps[];
  /**
   * These 4 methods can be used to tap into the underlying
   * detail view
   */
  onDetailOpen?: () => void;
  onDetailClose?: () => void;
  onDetailOpened?: () => void;
  onDetailClosed?: () => void;
  /**
   * This method is very incomplete. Currently, `onResize` is fired
   * when the gallery in the `Detailed` version goes from 2 rows to 1
   */
  onResize?: () => void;
  onEnter?: () => void;
  onExit?: () => void;
  onExited?: () => void;
}

export enum ImageLoadTrackerType {
  /**
   * A "simple" tracker type display a clean grey box with a spinner
   * and a provided title */
  Simple = "Simple",
  Preview = "Preview",
  Detailed = "Detailed",
}

interface IImageLoadTrackerState {
  /**
   * We keep track of the mount in state
   * such that we can delay updating
   */
  mount: boolean;
}

const defaultImageLoadTracker: IImageLoadTrackerState = {
  mount: null,
}

const UPDATE_MOUNT_THRESHOLD = 300;

export class ImageLoadTracker extends React.Component<IImageLoadTrackerProps, IImageLoadTrackerState> {
  public state: IImageLoadTrackerState = defaultImageLoadTracker;
  private timer: any;

  public componentDidMount() {
    if (this.props.mount) {
      this.setState({
        mount: true,
      });
    }
  }

  public shouldComponentUpdate(nextProps: IImageLoadTrackerProps, nextState: IImageLoadTrackerState) {
    if (this.props.title !== nextProps.title) return true;
    if (this.props.subtitle !== nextProps.subtitle) return true;
    if (!_.isEqual(this.props.images, nextProps.images)) return true;
    if (this.props.mount !== nextProps.mount) return true;
    if (this.props.type !== nextProps.type) return true;

    if (this.state.mount !== nextState.mount) return true;

    return false;
  }

  public componentDidUpdate(prevProps: IImageLoadTrackerProps) {
    if (prevProps.mount !== this.props.mount) {
      this.handleChangeMountProps(this.props.mount);
    }
  }


  public render() {
    return (
      <CSSTransition
        in={this.state.mount}
        timeout={750}
        classNames="image-load-tracker"
        appear={true}
        unmountOnExit={true}
        mountOnEnter={true}
        {...this.props.onEnter && {
          onEnter: this.props.onEnter
        }}
        {...this.props.onExit && {
          onExit: this.props.onExit
        }}
        {...this.props.onExited && {
          onExited: this.props.onExited
        }}
      >
        <div className={classNames("image-load-tracker", {
          [`image-load-tracker--${_.lowerCase(this.props.type)}`]: this.props.type,
        })}>

          {(this.props.type == ImageLoadTrackerType.Simple || this.props.type === ImageLoadTrackerType.Preview ) && (
            <div className="image-load-tracker__loader-info">
              <div className="image-load-tracker__loader">
                <Loading type={LoadingType.Spinner} />
              </div>

              <div className="image-load-tracker__info">
                <div className="image-load-tracker__info-title">
                  {this.props.title}
                </div>

                {this.props.subtitle && (
                  <div className="image-load-tracker__info-subtitle">
                    {this.props.subtitle}
                  </div>
                )}
              </div>
            </div>
          )}

          {this.props.images && (
            (this.props.type === ImageLoadTrackerType.Preview && (
              <div className="image-load-tracker__image">
                <Image {..._.first(this.props.images)} />
              </div>
            )) ||
            (this.props.type === ImageLoadTrackerType.Detailed && (
              <Accordion
                {..._.isFunction(this.props.onDetailOpen) && {
                  onOpening: this.props.onDetailOpen
                }}
                {..._.isFunction(this.props.onDetailClose) && {
                  onClosing: this.props.onDetailClose
                }}
                {..._.isFunction(this.props.onDetailOpened) && {
                  onOpen: this.props.onDetailOpened
                }}
                {..._.isFunction(this.props.onDetailClosed) && {
                  onClose: this.props.onDetailClosed
                }}
                renderTitle={() => {
                  return (
                    <div className="image-load-tracker__loader-info">
                      <div className="image-load-tracker__loader">
                        <Loading type={LoadingType.Spinner} />
                      </div>

                      <div className="image-load-tracker__info">
                        <div className="image-load-tracker__info-title">
                          {this.props.title}
                        </div>
                      </div>
                    </div>
                  );
                }}
                renderSibling={() => {
                  return (
                    <div className="image-load-tracker__images--small">
                      <Gallery
                        snapParentWidthToGalleryWidth={true}
                        maxRowCount={1}
                        itemWidth={35}
                        itemHeight={35}
                        images={this.props.images}
                        renderImage={(image: IImageProps, index: number, remainder?: number) => {
                          // @ts-ignore
                          const { sizes, ...imageWithoutSizes } = image || {};

                          return (
                            <Image
                              bubble={true}
                              preventTapAndHold={true}
                              className="gallery-cell-contents"
                              alwaysVisible={true}
                              {...remainder > 0 && {
                                renderOverlayContent: () => {
                                  return <div style={{
                                    display: "flex",
                                    height: "100%",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    backgroundColor: "rgba(0,0,0,.7)",
                                    color: "white",
                                    padding: "5%",
                                    borderRadius: "25%",
                                  }}>+{remainder}</div>
                                }
                              }}
                              {...image && { sizes: [_.first(image.sizes)] }}
                              {...imageWithoutSizes }
                            />
                          );
                        }}
                      />
                    </div>
                  );
                }}
                renderContent={() => {
                  return (
                    <div className="image-load-tracker__images">
                      <Gallery
                        snapParentHeightToGalleryHeight={true}
                        {...this.props.onResize && {
                          onSnapParentHeightToGalleryHeight: this.props.onResize,
                        }}
                        maxRowCount={2}
                        itemWidth={50}
                        itemHeight={50}
                        images={this.props.images}
                        renderImage={(image: IImageProps, index: number, remainder?: number) => {
                          // @ts-ignore
                          const { sizes, ...imageWithoutSizes } = image || {};

                          return (
                            <Image
                              bubble={true}
                              preventTapAndHold={true}
                              className="gallery-cell-contents"
                              alwaysVisible={true}
                              {...remainder > 0 && {
                                renderOverlayContent: () => {
                                  return <div style={{
                                    display: "flex",
                                    height: "100%",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    backgroundColor: "rgba(0,0,0,.7)",
                                    color: "white",
                                    padding: "5%",
                                    borderRadius: "25%",
                                  }}>+{remainder}</div>
                                }
                              }}
                              {...image && { sizes: [_.first(image.sizes)] }}
                              {...imageWithoutSizes }
                            />
                          );
                        }}
                      />
                    </div>
                  );
                }}
              />
            ))
          )}
        </div>
      </CSSTransition>
    );
  }

  private handleChangeMountProps(mount: boolean) {
    if (!_.isNil(this.timer)) {
      clearTimeout(this.timer);
      this.timer = null;
    }

    if (mount) {
      this.setState({
        mount,
      });
    } else {
      this.timer = setTimeout(() => {
        this.setState({
          mount,
        }, () => {
          this.timer = null
        });
      }, UPDATE_MOUNT_THRESHOLD);
    }
  }
}