import * as React from 'react';
import '../styles/components/choice-list.css';
import ChoiceOption from './choice-option';

interface choiceMultipleState{
    itemsSelected: string[];
}
interface food{
    name: string,
    veg: boolean
}

interface ChoiceMultipleProps{
    options: food[];

}
class choiceState extends React.Component<ChoiceMultipleProps, choiceMultipleState> {
    state={
        itemsSelected: [] as string[]
    }
    render(){
        let selectedFood = this.findSelected();
         //<ChoiceOption option={option} onClick={this.clickSelect} selectedOption>
        return(
            <div>
                <div>
                    <ul className="choice-list" >
                        {this.props.options.map((item: food) => {
                            return (
                               <ChoiceOption item={item} onSelect={this.setSelected}/>

                            );
                        })}
                    </ul>
                </div>
                {console.log(selectedFood)}
                 {selectedFood.length>0 &&  (
                     <div>
                    <h3> Selected </h3>
                    <ul className= "choice-list">
                        {selectedFood.map((item: food) => {
                            return (
                                <ChoiceOption item={item} onSelect={this.setSelected}/>
                            )
                        })}
                    </ul>
                </div>
                )}
            </div>
        )
    }
    setSelected = (item: food) => {
        let newArray = this.state.itemsSelected.slice();
        newArray.push(item.name);
        this.setState({
            itemsSelected:newArray
        });
    }
    findSelected = (): food[] => {
        return this.props.options.filter((item: food) => {
            return this.state.itemsSelected.indexOf(item.name)>=0
        });
    }

}
export default choiceState;