import React, { Component } from 'react';


class ComposeSalad extends React.Component {
    constructor(props) {
        this.state = {
            chosenProtein: []
        }
    }

    handleClick = ()  => {

    }

    onProteinClick = (event) => {
        console.log(event.target.checked, event.target.name);
    }


    render() {
        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 protein = Object.keys(inventory).filter(name => inventory[name].protein);
        let extras = Object.keys(inventory).filter(name => inventory[name].extra);
        let dressing = Object.keys(inventory).filter(name => inventory[name].dressing);

        return (
            <div className="container">
                <h4>Välj bas</h4>
                <form id = "foundationChoice" onSubmit={() => this.onSubmitHandler}>
                <select>
                    {foundations.map(name => <option key={name}>
                        {name} +{inventory[name].price}kr</option>)}
                </select>


                <h4>Välj protein:</h4>
                {protein.map(name => <div key={name}> <form> <input type="checkbox" id="proteinChoice" onChange={this.onProteinClick} />
                    {name} +{inventory[name].price}kr </form></div>)}

                <h4>Välj extras:</h4>
                {extras.map(name => <div key={name}> <form> <input type="checkbox" id="extraChoice" />
                    {name} +{inventory[name].price}kr</form></div>)}

                <h4>Välj dressings:</h4>
                <select>
                    {dressing.map(name => <option key={name}>
                        {name} +{inventory[name].price}kr</option>)}
                </select>
                </form>


            </div>
        );
    }
}

export default ComposeSalad;