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


const BASE_URL = "localhost";

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

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

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

  getPairsEventHandler = (event) =>{
    let url = `http://${BASE_URL}:3005/getPairs`;
    
    this.setState({waitingPairs:true});
    
    fetch(url, {}).then(function(response) { return response.json(); }).then(function(data) {
      this.setState({pairs : data, renderPairsList:true, waitingPairs:false});
    }.bind(this));


  }

  savePairsEventHandler(event){
    let url = `http://${BASE_URL}:3005/savePairs`;
    
    this.setState({waitingSave:true});
    fetch(url, {}).then(function(response) { return response.json(); }).then(function(data) {
      this.setState({waitingSave:false, renderFinish:data.result});
    }.bind(this));
  }

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

        <div className = "horizontalDiv">
          <button disabled={this.state.waitingPairs} 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 disabled={this.state.waitingSave} onClick = {this.savePairsEventHandler}> Save pairs </button>
        }
        {
          this.state.renderFinish &&
          <h2> Pairs saved </h2>
        }
      </div>
    );
  }
}

export default App;