const config = {
    apiKey: "AIzaSyBmaoA1nVF3xqZ-_gtINZR86ub_hEN-_5s",
    authDomain: "react-test-1b3de.firebaseapp.com",
    databaseURL: "https://react-test-1b3de.firebaseio.com",
    projectId: "react-test-1b3de",
    storageBucket: "react-test-1b3de.appspot.com",
    messagingSenderId: "568077550139"
  };
  firebase.initializeApp(config);

const database = firebase.database();
const colors = database.ref('colors');

//App
class App extends React.Component {
  
  render() {
    return (
      <div className="container">
        <Tile class={"tile-1"}/>
        <Tile class={"tile-2"}/>
        <Tile class={"tile-3"}/>
      </div>
    )
  }
}

//components (not using village design)
class Tile extends React.Component {
  
  state = {color: "#FFFFFF"};

  updateTile() {
    //get random number between 1 and 3
    const random = Math.floor((Math.random() * 3) + 1);
    
    //empty variable for selectedColor
    let selectedColor;
    
    //retrieve color depending on random number
    let promise = new Promise((resolve, reject) => {
      colors.on('value', function(snapshot) {
        if(random === 1) {
          selectedColor = snapshot.val().mint;
        } else if (random === 2) {
          selectedColor = snapshot.val().pink;
        } else {
          selectedColor = snapshot.val().purple;
        }
        resolve(selectedColor);
      }); 
    });
    
    //setState of color property to selected color
    promise.then((resolvedColor) => {
      this.setState({color: resolvedColor});
    });
  }

  render() {
    return (
      <div onClick={this.updateTile.bind(this)} style={{background: this.state.color}} className={this.props.class}>
        <div className="color-text-box">
          <div className="color-text">
            {this.state.color}
          </div>
        </div>
      </div>
    )
  }
}

//"inject" to DOM
ReactDOM.render(
  <App/>,
  document.getElementById('app')
);