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

class Board extends React.Component {
  constructor() {
    super();
    this.state = {
      digits: [1, 2, 4, 8],
      date: new Date(),
      binaryHoursDecimal: [false, false],
      binaryHoursUnity: [false, false, false, false],

      binaryMinutesDescimal: [false, false, false],
      binaryMinutesUnity: [false, false, false, false],

      binarySecondsDecimal: [false, false, false],
      binarySecondsUnity: [false, false, false, false]
    };
  }

  refresh() {
    this.setState({
      date: new Date()
    });
  }

  componentDidMount() {
    this.interval = setInterval(() => this.refresh(), 1000);
    let i;
    let rest;
    let unity;
    let hour = this.state.date.getHours();
    let minutes = this.state.date.getMinutes();
    let seconds = this.state.date.getSeconds();

    if (hour > 10) {
      this.setState({
        binaryHoursDecimal: [true, false]
      });
      unity = hour % 10;

      for (i = 3; i >= 0; i--) {
        if (unity >= this.state.digits[i]) {
          unity = unity / this.state.digits[i];
          this.setState(prevState => {
            binaryHoursUnity: prevState.binaryHoursUnity[i] = ``true;
          });
        }
      }
    } else {
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <div> {console.log(this.state.binaryHoursUnity)} </div>;
  }
}

export default Board;