import React, { Component } from "react";

import './App.scss';

const backendUrl = "https://kucinakobackend.ichigo.everydayimshuflin.com";

function makeRequest(queryString, jsonHandler) {
  const effectiveUrl = `${backendUrl}/${queryString}`
  fetch(`${backendUrl}`)
    .then((resp) => {
      return resp.json()
    })
    .then((json) => {
      jsonHandler(json);
    });
}

function testHandler(json) {
  console.log("JSON");
  console.log(json);
}

class App extends Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    const value = this.input.current.value;
    console.log("handling submit with value: ", value);
    makeRequest("", testHandler);
  }

  render() {
    return(
      <main>
        <div className='container'>
          <h1>Kucinako</h1>
          <div className='textInput'>
              <input className='textInput' type="text" ref={ this.input } />
          </div>
          <br/>
          <button onClick={ this.handleSubmit }>Saimiar</button>
          <button onClick={ this.handleSubmit }>English</button>
        </div>
      </main>
    );
  }
}

export default App;