import * as _ from "lodash";
import * as React from "react";
import { CSSTransition } from 'react-transition-group';
import { getImageSrc } from "../../utilities/image";

import { Image } from "../Image";

export enum MapExtra {
  Sleepy = "sleepy-pin",
  SleepyCamera = "sleepy-camera",
  BrokenPicture = "broken-picture",
  Card = "card-pin",
}

interface IMapProps {
  mount: boolean;
  extra?: MapExtra;
  extraBounceAnimation?: boolean;
  imagePrefix?: string;
  onEntering?: () => void;
  onEnter?: () => void;
  /**
   * This is a useful hook to ensure that subsequent transitions
   * only occur after the full map asset has loaded
   */
  onMapLoad?: () => void;
}

interface IMapState {
  mount: boolean;
}

const defaultMapState: IMapState = {
  mount: false,
};

export class Map extends React.Component<IMapProps, IMapState> {
  public state: IMapState = defaultMapState;

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

  public componentDidUpdate(prevProps: IMapProps) {
    if (this.props.mount !== prevProps.mount) {
      this.setState({
        mount: this.props.mount,
      });
    }
  }

  public render() {
    return (
      <CSSTransition
        in={this.state.mount}
        timeout={600}
        classNames="map"
        unmountOnExit={true}
        appear={this.props.mount}
        {..._.isFunction(this.props.onEntering) && { onEntering: this.props.onEntering }}
        {..._.isFunction(this.props.onEnter) && { onEnter: this.props.onEnter }}
      >
        {state => (
          <div className="map">
            <div className="map__image-asset">
              <Image src={getImageSrc(this.props.imagePrefix, "map.png")} {..._.isFunction(this.props.onMapLoad) && {
                onLoad: this.props.onMapLoad,
              }} />
            </div>

            {this.props.extra && (
              <div className={`map__extra map__extra--${this.props.extra} ${this.props.extraBounceAnimation && "map__extra-animated"}`}>
                {this.renderExtra()}
              </div>
            )}
          </div>
        )}
      </CSSTransition>
    )
  }

  private renderExtra = () => {
    switch (this.props.extra) {
      case MapExtra.BrokenPicture:
      case MapExtra.Sleepy:
      case MapExtra.SleepyCamera:
        return (
          <Image src={getImageSrc(this.props.imagePrefix, `${this.props.extra}.png`)} />
        );
      case MapExtra.Card:
        return (
          <>
            <Image src={getImageSrc(this.props.imagePrefix, `${this.props.extra}.png`)} />
            <Image src={getImageSrc(this.props.imagePrefix, "card-pin-shadows.png")} />
          </>
        );
    }
  }
}