import React from "react";
const PropTypes = React.PropTypes;

var styles = {
  container: {
    bottom: 0,
    fontSize: "55px",
    left: 0,
    position: "fixed",
    right: 0,
    top: 0
  },

  content: {
    marginTop: "30px",
    position: "absolute",
    textAlign: "center",
    width: "100%"
  }
};

class Loading extends React.Component {
  constructor(props, context, updater) {
    super(props, context, updater);
    this.originalText = props.text;
    this.state = {
      text: this.originalText
    };
  }

  componentWillMount() {
    const stopper = `${this.originalText}...`;
    this.interval = setInterval(() => {
      if (this.state.text === stopper) {
        // Usually: avoid setState in cDM, because it causes a re-render.
        this.setState({
          text: this.originalText
        });
      }
      else {
        this.setState({
          text: `${this.state.text}.`
        });
      }
    }, this.props.speed);
    console.log("Loading: cDM", this.interval);
  }

  componentWillUnmount() {
    console.log("Loading: cWU", this.interval);
    clearInterval(this.interval);
  }

  render() {
    console.log("Loading: render");
    return (
      <div style={styles.container}>
        <p style={styles.content}>{this.state.text}</p>
      </div>
    );
  }
}

Loading.defaultProps = {
  speed: 300,
  text: "Loading"
};

Loading.propTypes = {
  speed: PropTypes.number,
  text: PropTypes.string
};

export default Loading;