import React, { Component } from 'react';
import logo from './grappa.jpg';
import { Link } from 'react-router-dom';
import axios from 'axios';

class Contract extends Component {
  constructor(props) {
    super(props);
    this.state = {
      completionEta: "",
      supervision: "",
      misc: ""
    }
  }

  componentDidMount() {
    document.title = "Grappa: Contract page";
  }

  handleContractChange = (event) => {
    console.log("handler called " + event.target.name + " " + event.target.value);
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  sendForm = (event) => {
    axios.post('/api/contract',{
      completionEta: this.state.completionEta,
      supervision: this.state.supervision,
      misc: this.state.misc
    })
      .then((resp) => {
      console.log(resp)
    })
    .catch((error) => {console.error(error)});
    console.log("Nappia painettiin.");
  }

  render() {
    return (
    <div className="App">

        <div className="ui inverted segment">
            <img src={logo} className="App-logo" alt="logo" />
            <h2>Thesis Contract</h2>
        </div>

        <div className="ui segment">
            <h2>Gradusopimus tehdään gradunohjauksen alkaessa</h2>
            <h3>Sopimusta voidaan muuttaa osapuolten yhteisestä päätöksestä.</h3>

            <div className="ui form">
                <form onSubmit={this.handlePost}>
                    <div className="field">
                        <label>Gradun valmistumisen ajankohta</label>
                        <textarea ref="input" rows="2" placeholder="arvioitu gradun valmistumisen aikataulu" type="text" name="completionEta" value={this.state.completionEta} onChange={this.handleContractChange} />
                    </div>
                    <div className="field">
                        <label>Ohjaus</label>
                        <textarea ref="input" rows="2" placeholder="ohjauksen määrän ja laadun yksityiskohdat" type="text" name="supervision" value={this.state.supervision} onChange={this.handleContractChange} /> <br />
                    </div>
                    <div className="field">
                        <label>Muu</label>
                        <textarea ref="input" rows="2" placeholder="muut sovittavat asiat" type="text" name="misc" value={this.state.misc} onChange={this.handleContractChange} /> <br />
                    </div>
                    <button className="ui primary button" type="submit" onClick={this.sendForm}>Save</button>
                </form>
            </div>
            <br />
            <Link to="/"> Go back to HomePage :P </Link>
        </div>
    </div>



/*
      <div className="Contract">
        <div className="Contract-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Thesis Contract</h2>
        </div>
        <h2>Gradusopimus tehdään gradunohjauksen alkaessa</h2>
        <p className="Contract-intro">
          Sopimusta voidaan muuttaa osapuolten yhteisestä päätöksestä.
          </p>
        <textarea ref="input" placeholder="arvioitu gradun valmistumisen aikataulu" type="text" name="completionEta" value={this.state.completionEta} onChange={this.handleContractChange} /> <br />
        <br />
        <textarea ref="input" placeholder="ohjauksen määrän ja laadun yksityiskohdat" type="text" name="supervision" value={this.state.supervision} onChange={this.handleContractChange} /> <br />
        <br />
        <textarea ref="input" placeholder="muut sovittavat asiat" type="text" name="misc" value={this.state.misc} onChange={this.handleContractChange} /> <br />
        <br />
        <input type="submit" value="send" onClick={this.sendForm} />




        <br />
        <Link to="/"> Go back to HomePage :P </Link>
      </div>*/
    );
  }
}

export default Contract;

@@ -2653,1142 +2653,8 @@
 iv%3E%0A
-%0A%0A%0A/*%0A      %3Cdiv className=%22Contract%22%3E%0A        %3Cdiv className=%22Contract-header%22%3E%0A          %3Cimg src=%7Blogo%7D className=%22App-logo%22 alt=%22logo%22 /%3E%0A          %3Ch2%3EThesis Contract%3C/h2%3E%0A        %3C/div%3E%0A        %3Ch2%3EGradusopimus tehd%C3%A4%C3%A4n gradunohjauksen alkaessa%3C/h2%3E%0A        %3Cp className=%22Contract-intro%22%3E%0A          Sopimusta voidaan muuttaa osapuolten yhteisest%C3%A4 p%C3%A4%C3%A4t%C3%B6ksest%C3%A4.%0A          %3C/p%3E%0A        %3Ctextarea ref=%22input%22 placeholder=%22arvioitu gradun valmistumisen aikataulu%22 type=%22text%22 name=%22completionEta%22 value=%7Bthis.state.completionEta%7D onChange=%7Bthis.handleContractChange%7D /%3E %3Cbr /%3E%0A        %3Cbr /%3E%0A        %3Ctextarea ref=%22input%22 placeholder=%22ohjauksen m%C3%A4%C3%A4r%C3%A4n ja laadun yksityiskohdat%22 type=%22text%22 name=%22supervision%22 value=%7Bthis.state.supervision%7D onChange=%7Bthis.handleContractChange%7D /%3E %3Cbr /%3E%0A        %3Cbr /%3E%0A        %3Ctextarea ref=%22input%22 placeholder=%22muut sovittavat asiat%22 type=%22text%22 name=%22misc%22 value=%7Bthis.state.misc%7D onChange=%7Bthis.handleContractChange%7D /%3E %3Cbr /%3E%0A        %3Cbr /%3E%0A        %3Cinput type=%22submit%22 value=%22send%22 onClick=%7Bthis.sendForm%7D /%3E%0A%0A%0A%0A%0A        %3Cbr /%3E%0A        %3CLink to=%22/%22%3E Go back to HomePage :P %3C/Link%3E%0A      %3C/div%3E*/%0A
     

delete commented-out parts