import React, { Component } from "react";

import Button from "../ShareComponents/Button";
import Input from "../ShareComponents/Input";
import "./Home.scss";

class Home extends Component {
  state = {
    response: {},
    valueIbsd: "",
    valueTitle: "",
    valueAuthor: "",
    valueDescription: "",
    valuePublishedYear: "",
    valuePublisher: ""
  };
  // componentDidMount() {
  //   fetch("/api/users")
  //     .then(res => {
  //       return res.json();
  //     })
  //     .then(response => {
  //       console.log(response);
  //       this.setState({ response });
  //     });
  // }

  onChange = event => {
    const target = event.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    console.log(event.target.name, name);

    this.setState({
      [name]: value
    });
  };

  render() {
    const {
      valueIbsd,
      valueTitle,
      valueAuthor,
      valueDescription,
      valuePublishedYear,
      valuePublisher
    } = this.state;
    return (
      <div className="container">
        <p>This is the Home page.</p>
        <p>Content for the Home page lives here.</p>
        <Input
          inputLabel="Ibsd"
          inputValue={valueIbsd}
          inputType="text"
          preProps={{
            name: "valueIbsd",
            onChange: this.onChange
          }}
        />
        <Input
          inputLabel="Title"
          inputValue={valueTitle}
          inputType="text"
          preProps={{
            name: "valueTitle",
            onChange: this.onChange
          }}
        />
        <Input
          inputLabel="Author"
          inputValue={valueAuthor}
          inputType="text"
          preProps={{
            name: "valueAuthor",
            onChange: this.onChange
          }}
        />
        <Input
          inputLabel="Description"
          inputValue={valueDescription}
          inputType="text"
          preProps={{
            name: "valueDescription",
            onChange: this.onChange
          }}
        />
        <Input
          inputLabel="Published Year"
          inputValue={valuePublishedYear}
          inputType="number"
          preProps={{
            name: "valuePublishedYear",
            onChange: this.onChange
          }}
        />
        <Input
          inputLabel="Publisher"
          inputValue={valuePublisher}
          inputType="text"
          preProps={{
            name: "valuePublisher",
            onChange: this.onChange
          }}
        />
        <Button>hello</Button>
        {JSON.stringify(this.state.response || null)}
      </div>
    );
  }
}

export default Home;