import * as anime from "animejs";
import * as _ from "lodash";
import * as React from "react";
import { CSSTransition } from 'react-transition-group';

import { Button, IButtonProps } from "../../components/Button";
import { Map, MapExtra } from "../../components/Map";

export enum StaticMapAnimation {
  EnteringTitleText = "entering-title-text",
  BouncingMapExtra = "bouncing-map-extra",
}

export interface IStaticMapProps {
  mount: boolean;
  mapExtra: MapExtra;
  /**
   * The `title` property is an array of strings. Each string
   * is a line.
   */
  title: string[];
  subtitle?: string;
  actions?: IButtonProps[];
  animations?: StaticMapAnimation[];
  renderContent?: () => any;
  renderBottomContent?: () => any;
  imagePrefix?: string;
}

interface IStaticMapState {
  mount: boolean;
  mapMounted?: boolean;
}

const defaultStaticMapState: IStaticMapState = {
  mount: false,
  mapMounted: false,
};

const MOUNT_DELAY = 200;
const TIME_TO_MAP_ANIMATIONS_COMPLETE = 600;
const TIME_TO_MAP_TEXT_ANIMATIONS_COMPLETE = TIME_TO_MAP_ANIMATIONS_COMPLETE + 750;

export class StaticMap extends React.Component<IStaticMapProps, IStaticMapState> {
public state: IStaticMapState = defaultStaticMapState;

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

public componentDidUpdate(prevProps: IStaticMapState, prevState: IStaticMapState) {
  // We want a "springy" animation for the button which isn't easily doable in CSS. So we use animejs.
  if (this.state.mount && !prevState.mount && document) {
    anime({
      targets: document.querySelectorAll(".static-map .static-map__btn-group .btn"),
      scale: [1.1, 1],
      delay: TIME_TO_MAP_TEXT_ANIMATIONS_COMPLETE,
    });
  }

    if (this.props.mount !== prevProps.mount) {
      setTimeout(() => {
        this.setState({
          mount: this.props.mount,
        });
      }, this.props.mount ? MOUNT_DELAY : 0);
    }
  }

  public render() {
    return (
        <CSSTransition
          in={this.state.mount}
          timeout={{
            enter: 600,
            exit: 700,
          }}
          classNames="static-map"
          unmountOnExit={true}
        >
          {state => (
            <div className={`static-map ${!_.isEmpty(this.props.animations) && this.props.animations.filter(animation => !!animation).map(animation => `static-map-animation--${animation}`).join(" ")}`}>
              <div className="static-map__header">
                <Map extra={this.props.mapExtra} extraBounceAnimation={this.props.animations.includes(StaticMapAnimation.BouncingMapExtra)} mount={this.state.mount} imagePrefix={this.props.imagePrefix} onMapLoad={() => {
                  this.setState({
                    mapMounted: true,
                  });
                }}/>
              </div>
              <div className={`static-map__content ${this.state.mapMounted && "static-map__content-enter"}`}>
                {this.props.title.map((line, index) => (
                  <h2 className={`static-map__content-title-line static-map__content-title-line-${index + 1}`} key={line}>
                    {line}
                  </h2>
                ))}

                {!_.isEmpty(this.props.subtitle) && (
                  <h4 className="static-map__content-subtitle">
                    {this.props.subtitle}
                  </h4>
                )}

                {_.isFunction(this.props.renderContent) && (
                  <div className="static-map__inner-content">
                    {this.props.renderContent()}
                  </div>
                )}

                {!_.isEmpty(this.props.actions) && (
                  <div className="static-map__btn-group">
                    {this.props.actions.filter(button => !!button).map((button, index) => <Button {...button} key={index} />)}
                  </div>
                )}

                {_.isFunction(this.props.renderBottomContent) && (
                  <div className="static-map__bottom-content">
                    {this.props.renderBottomContent()}
                  </div>
                )}
              </div>
            </div>
          )}
        </CSSTransition>
    )
  }
}