import React, { Component } from 'react';
import './App.css';
import PairsListComponent from './PairsListComponent.js';



class App extends Component {
  constructor(props){
    super(props);

    this.state = {renderPairsList: false, pairs: []};

    this.getPairsEventHandler = this.getPairsEventHandler.bind(this);
  }

  getPairsEventHandler(event){
    console.log("Get Pairs");
    this.setState({pairs: ['Bilal Rahima','A1 A2','B1 B2'],renderPairsList:true});
  }

  savePairsEventHandler(event){
    
  }

  render() {
    return (
      <div className = "App">
        <div>
          <h2>Meetup app</h2>
        </div>

        <div className = "horizontalDiv">
          <button onClick = {this.getPairsEventHandler}>Get pairs</button>
        </div>
        <div>
          <h2> List of pairs : </h2>
        </div>
        {
          this.state.renderPairsList &&
            <PairsListComponent pairs = {this.state.pairs}/>
        }
        {
          this.state.renderPairsList &&
            <button onClick = {this.savePairsEventHandler}> Save pairs </button>
        }
      </div>
    );
  }
}

export default App;