import React from "react";
import "./App.css";

/* Import Components */
import Input from "./components/Input";
import Select from "./components/Select";
import AlcoholTable from "./components/AlcoholTable";
import Button from "./components/Button"



function ListRendering(props){
  const list = props.list;
  const ListItems = list.map((id) =>
  <div key={id}>
  <AlcoholTable
    title={id.title}
    name={id.title}
    placeholder={"Select amount"}
    options={state.amountOptions}
  />
    </div>
  );
  return(
  <div>{ListItems}</div>
  )
}

class Form extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      User:{
        weight:"",
        gender:"",
        time:"",
      },

      products: [
          {id: '1',title: 'Big Beer', amount: 0, milliliters: 500},
          {id: '2',title: 'Small Beer', amount: 0, milliliters: 350},
          {id: '3',title: 'Wine', amount: 0, milliliters: 175},
          {id: '4',title: 'Champagne', amount: 0, milliliters: 120},
          {id: '5',title: 'vodka', amount: 0, milliliters: 50},
      ],

    genderOptions:["Male","Female"],
    amountOptions:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
    };
    this.handleWeight=this.handleWeight.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
    this.handleInput = this.handleInput.bind(this);
    this.handleTime = this.handleTime.bind(this);
  }


  handleInput(e) {
    let value = e.target.value;
    let name = e.target.name;
    this.setState(
      prevState => ({
        User: {
          ...prevState.User,
          [name]: value
        }
      }),
      () => console.log(this.state.User)
    );
  }

  handleWeight(e) {
    let value = e.target.value;
    this.setState(
      prevState => ({
        User: {
          ...prevState.User,
          weight: value
        }
      }),
      () => console.log(this.state.User)
    );
  }

  handleTime(e) {
    let value = e.target.value;
    this.setState(
      prevState => ({
        User: {
          ...prevState.User,
          time: value
        }
      }),
      () => console.log(this.state.User)
    );
  }

  handleClearForm(e){
    e.preventDefault();
    this.setState({
      User:{
      weight:'',
      gender:'',
      time:'',
      }
    });
  }

  render() {
    return (
      <div className="calculator">
        <form className="container-fluid">
        <Input
            inputType={"number"}
            name={"Weight"}
            title={"Weight"}
            placeholder={"Enter your weight"}
            value={this.state.User.weight}
            handleChange={this.handleWeight}
          />
          <Select
            title={"Gender"}
            name={"gender"}
            placeholder={"Select Gender"}
            options={this.state.genderOptions}
            value={this.state.User.gender}
            handleChange={this.handleInput}
        />
        <Input
            inputType={"number"}
            name={"time"}
            title={"Time"}
            placeholder={"drinking time in hours"}
            value={this.state.User.time}
            handleChange={this.handleTime}
          />
          <ListRendering list={this.state.products}/>
          <Button
          action={this.handleFormSubmit}
          type={"primary"}
          title={"Submit"}
        />{" "}
        {/*Submit */}
        <Button
          action={this.handleClearForm}
          type={"secondary"}
          title={"Clear"}
        />{" "}
        </form>
      </div>
    );
  }
}

export default Form;