import React from "react";
import logo from "./logo.png";
import { Table } from "reactstrap";
import { Button } from "reactstrap";
import { Form, FormGroup, Label, Input, FormText } from "reactstrap";

import axios from "axios";

import "./App.css";

class App extends React.Component {
  state = {
    message: "",
    x: null,
    y: null,
    direction: null
  };

  handleSubmit(e) {
    console.log("Submitted");
    e.preventDefault();
    axios({
      method: "POST",
      url: "http://localhost:8080/send",
      data: this.state.message
    }).then(response => {
      if (response.data.status === "success") {
        alert("Script Submitted.");
        this.resetForm();
      } else if (response.data.status === "fail") {
        alert("Script failed");
      }
    });
  }

  resetForm() {
    this.setState({ message: "" });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to robot controller</h1>
        </header>
        <form
          id="contact-form"
          onSubmit={this.handleSubmit.bind(this)}
          method="POST"
        >
          <div className="form-group">
            <label htmlFor="message"></label>
            <textarea
              className="form-control"
              rows="5"
              id="message"
              value={this.state.message}
              onChange={this.onMessageChange.bind(this)}
            />
          </div>
          <Button type="submit" className="btn-primary" color="primary">
            Submit
          </Button>
        </form>
        <table>
          <tbody>
            {Array.from({ length: 5 }, _ => (
              <tr>
                {Array.from({ length: 5 }, _ => (
                  <Cell />
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }

  onMessageChange(event) {
    this.setState({ message: event.target.value });
  }
}

class Cell extends React.Component {
  render() {
    return <td className="cell"></td>;
  }
}

export default App;