import * as React from "react";
import { CSSTransition } from 'react-transition-group';

import { Sprite, SpriteType } from "../Sprite";

interface ISplashProps {
  mount?: boolean;
}

export class Splash extends React.PureComponent<ISplashProps, {}> {
  public ref: React.RefObject<HTMLDivElement>;
  constructor(props) {
    super(props);

    this.ref = React.createRef();
  }

  public render() {
    return (
      <CSSTransition
        in={this.props.mount}
        timeout={300}
        classNames="splash"
        appear={this.props.mount}
        unmountOnExit={true}
      >
        <div className="splash" ref={this.ref}>
          <div className="splash__sprite">
            <Sprite type={SpriteType.AircamLogo} />
          </div>
          <div className="splash__title">
            <h1>Aircam</h1>
          </div>
        </div>
      </CSSTransition>
    );
  }
}