import React from 'react'
//import axios from "axios"
import "../styles/AddNodeForm.css"
import { connect } from 'react-redux';
import {addNode} from "../actions/actions"

class AddNodeForm extends React.Component {
  constructor(props) {
    super(props);
    this.state ={
      name: "",
      image: ""
  }

  this.handleNameChange = this.handleNameChange.bind(this)
  this.handleImageChange = this.handleImageChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleNameChange(event) {
    this.setState({name: event.target.value})
  }

  handleImageChange(event) {
    this.setState({image: event.target.value})
  }


  handleSubmit(e) {
    e.preventDefault();
    //actions.addNode(this.state.parentID, this.state.name, this.state.image)
    this.props.addNode(this.state.parentID, this.state.name, this.state.image)
    //actions.loadTree()

  }


  handleImageUpload() {

  }


  render() {
      return (
        <form className="AddNodeForm" onSubmit={this.handleSubmit}>
          <div>
            <label>Enter name:</label>
            <input name="name" type="text" value={this.state.name} onChange={this.handleNameChange}/>
          </div>
          <div>
            <label>Upload photo</label>
            <input name="image" type="text" value={this.state.image} onChange={this.handleImageChange}/>
          </div>
          <button type="submit">Submit</button>
        </form>
      );
    }
}

export default connect(
  state => ({}),
  { addNode }
)(AddNodeForm);