// Dis is salad laborazion

// salladklassen

import inventory from "./inventory.ES6.js";
import React from "react";

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


      this.foundation = undefined;
      this.extras = [];
      this.proteins = [];
      this.dressings = undefined;
    }

    add(ingredient) {
        console.log("i theSalad, ingrediens-string: " + ingredient + " tomt?");
        if(inventory[ingredient].foundation === true){
            this.foundation = inventory[ingredient];
        }
        else if( [ingredient].extra === true){
            this.extras.push(inventory[ingredient]);
        }
        else if(inventory[ingredient].protein === true){
            this.proteins.push(inventory[ingredient]);
        }
        else if(inventory[ingredient].dressing === true){
            this.dressings = inventory[ingredient];
        }
    }
// Använd Splice för att ta bort element i vektor. ex. this.extras.indexOf(...)

    remove(ingredient){
        if(inventory[ingredient].foundation === true){
            this.foundation = undefined;

        }
        else if(inventory[ingredient].extra === true){
            this.extras.splice(this.extras.indexOf(ingredient), 1);

        }

        else if(inventory[ingredient].protein === true){
            this.proteins.splice(this.proteins.indexOf(ingredient), 1);
        }

        else if(inventory[ingredient].dressing === true){
            this.dressings = undefined;
        }
    }


    price(){
        let extraPrice = this.extras.reduce(function (total, num){
            return total + num.price;
        }, 0)

        let proteinsPrice = this.proteins.reduce(function (total, num) {
            return total + num.price
        }, 0)


        let sum = extraPrice + proteinsPrice + this.foundation.price
                        + this.dressings.price;

      return sum;




    }

    toString() {
        return ('Foundation: ' + this.foundation + ' \n Extras:' + this.extras +
        '\n Proteins: ' + this.proteins +
        '\n Dressings: ' + this.dressings);
    }
  }

export default Salad;


//ComposeSalad

import React from 'react';
import Salad from './theSalad.js';
class ComposeSalad extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      Foundation: " ",
      Proteins: [],
      Extras: [],
      Dressing: " ",
      Price: 0,

    };


    this.handleFoundationChange = this.handleFoundationChange.bind(this);
    this.handleProteinChange = this.handleProteinChange.bind(this);
    this.handleExtraChange = this.handleExtraChange.bind(this);
    this.handleDressingChange = this.handleDressingChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }



  handleFoundationChange(event) {
    let index = event.nativeEvent.target.selectedIndex;
    let a = event.nativeEvent.target[index].value;
    console.log("foundation before setState" + this.state.Foundation)
    this.setState({Foundation: a});
    console.log("foundation after setState" + this.state.Foundation);
    //console.log(this.state);
  }

  handleProteinChange(event){

    console.log("Start of handleProteinChange " + event.target.id)
		let a = this.state.Proteins.slice();
		if(!this.state.Proteins.includes(event.target.id)){
      a.push(event.target.name);
      console.log("array a after pushing protein: " + a);
      this.setState({Proteins : a});
      console.log("this.Proteins after setting this.setState(a)" + this.state.Proteins);

		} else {
			a.splice(a.indexOf(event.target.id), 1);
      this.setState({Proteins: a});


    }
    console.log("Protein state after state has been changed in protein change method" + this.state.Proteins[0]);





	}

  handleExtraChange(event){

    let a = this.state.Extras.slice();
		if(!this.state.Extras.includes(event.target.id)){
			a.push(event.target.name);
      this.setState({Extras: a});

		} else {

			a.splice(a.indexOf(event.target.id), 1);
			this.setState({Extras: a});
    }




  }

  handleDressingChange(event){
    let index = event.nativeEvent.target.selectedIndex;
    let a = event.nativeEvent.target[index].value;

    this.setState({Dressing: a});
    //console.log(this.state);
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log("handlesubmit: " + this.state.Foundation + this.state.Proteins + this.state.Extras + this.state.Dressing);
    alert('A name was submitted: ' + this.state.value);

    let s = new Salad();

    console.log("Current foundation, from state: " + this.state.Foundation);

    s.add(this.state.Foundation);

    console.log("Current Dressing, from state: " + this.state.Dressing);

    s.add(this.state.Dressing);

    for(let i of this.state.Proteins){
     s.add(i);
    }
   for(let i of this.state.Extras){
     s.add(i);
    }
    // s.add(this.state.Proteins[0]);
    // console.log("extra-state before add: " +this.state.Extras[0]);
    // s.add(this.state.Extras[0]);

    console.log(s.toString());




    //this.props.handleNewSalad(s);

  }




  render() {
    console.log("tjenna");
    const inventory = this.props.inventory;
    // test for correct ussage, the parent must send this datastructure
    if (!inventory)
      alert("inventory is undefined in ComposeSalad");

    let foundations = Object.keys(inventory).filter(
      name => inventory[name].foundation
    );
    let proteins = Object.keys(inventory).filter(
        name => inventory[name].protein
    );
    let extras = Object.keys(inventory).filter(
        name => inventory[name].extra
    );
    let dressings = Object.keys(inventory).filter(
        name => inventory[name].dressing
    );

    return (

     <form onSubmit={this.handleSubmit}>
      <div className="container">
        <h4>Välj bas</h4>
        <ul>
          <select name='foundation' onChange={e => this.handleFoundationChange(e)}>
               <option value="" selected disabled hidden>Välj här</option>
               {foundations.map(name => <option value={name}>{name} {inventory[name].price} kr </option>)}


            </select>
        </ul>

        <h4>Välj Protein</h4>
        <ul>
        <div className="form-check" id="proteins">
						{proteins.map(name =>
						<ul>
	    					<input type="checkbox" className="form-check-input" id={name} name={name} onChange={e => this.handleProteinChange(e)}/>
	   						<label className="form-check-label" htmlFor={name}>{name} (+{inventory[name].price}kr)</label>
	   					</ul>
	   					)}
  					</div>
        </ul>

        <h4>Välj Extras</h4>
        <ul>
        <div className="form-check" id="extras">
						{extras.map(name =>
						<ul>
	    					<input type="checkbox" className="form-check-input" id={name} name={name} onChange={e => this.handleExtraChange(e)}/>
	   						<label className="form-check-label" htmlFor={name}>{name} (+{inventory[name].price}kr)</label>
	   					</ul>
	   					)}
  					</div>

        </ul>

        <h4>Välj Dressing</h4>
        <ul>
          <select name='Dressing' onChange={e => this.handleDressingChange(e)}>
               <option value="" selected disabled hidden>Välj här</option>
               {dressings.map(name => <option value={name}>{name} {inventory[name].price} kr </option>)}


            </select>
        </ul>

      </div>
      <button onSubmit={e => this.handleSubmit(e)}>Skapa Sallad

      </button>
      </form>

    );
  }
}

export default ComposeSalad;


//App

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import inventory from './inventory.ES6.js';
import ComposeSalad from './ComposeSalad';
//import ComposeSaladModal from './ComposeSaladModal.js';
class App extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      data: []
};
  this.handleNewSalad = this.handleNewSalad(this);
  }

  handleNewSalad(s){
    console.log(this.state.data[0]);
  }



  render() {
    return (
      <div>
        <div className="jumbotron text-center">
          <h1>My Own Salad Bar</h1>
          <p>Here you can order custom made salads!</p>
         </div>
        <div>
        <ComposeSalad handleNewSalad={this.handleNewSalad}
      inventory={inventory} />;
      </div>

    </div>

    );
  }
}

export default App;