import React from "react";
import "./Bomb.css";

class Bomb extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    let counter = this.state.count;
    console.log("counter value", counter);
    this.interval = setInterval(() => {
      counter++;
      this.setState({
        count: counter
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval();
  }

  render() {
    if (this.state.count >= 8) {
      return (
        <div className="bomb-container">
          <h1>BOOOOOOOMMMMM</h1>
        </div>
      );
    } else if (!(this.state.count % 2)) {
      console.log("SHOULDbe EVEN", this.state.count);
      return (
        <div className="bomb-container">
          <h1>TICK</h1>
        </div>
      );
    } else {
      console.log("is Odd?", this.state.count);
      return (
        <div className="bomb-container">
          <h1>TOCK</h1>
        </div>
      );
    }
  }
}

export default Bomb;