import logo from './logo.svg';
import './App.css';
import React from 'react';
import MenuBar from './components/MenuBar';
import Login from './components/Login';
import Gamenights from "./components/Gamenights"

class App extends React.Component {

  constructor(props) {
    super(props)
    this.handleLogin = this.handleLogin.bind(this);
    this.onLogout = this.onLogout.bind(this);
    this.state = {
      user: null,
      token: null,
      gamenights: null
    };
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("component update?")
    if (prevState.token !== this.state.token) {
      const requestOptions = {
        method: 'GET',
        headers: { 'Authorization': `bearer: ${this.state.token}` },
      };
      fetch('api/gamenights', requestOptions)
        .then(response => response.json())
        .then(data => {
          if(data.result === "Ok") {
            this.setState((state, props) => ({
              gamenights: data.gamenights
            }));
          } else {
            this.setState((state, props) => ({
              flash_data: {
                type: "Error",
                message: data.message
              }
            }));
          }
          console.log(this.state)
        });
    }
}

  render() {
    if(this.state.token === null) {
      return (
        <div className="App">
          <Login onChange={this.handleLogin}/>
        </div>
      );
    } else {
      return (
        <div className="App">
          <MenuBar user={this.state.user} onLogout={this.onLogout}/>
          <Gamenights />
        </div>
      );
    }
  }

  onLogout() {
    this.setState((state, props) => ({
      user: null,
      token: null,
      flash_data: null
    }));
  }

  handleLogin(input) {
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(input)
    };
    fetch('api/login', requestOptions)
      .then(response => response.json())
      .then(data => {
        if(data.result === "Ok") {
          this.setState((state, props) => ({
            token: data.jwt
          }));
        } else {
          this.setState((state, props) => ({
            flash_data: {
              type: "Error",
              message: data.message
            }
          }));
        }
        console.log(this.state)
      });
  }
}

export default App;