import React, { Component } from 'react';
import QuestionItem from './IntentItem';
import '../css/Intent.css'

class IntentList extends Component {
    constructor (props){
        super(props);

        this.state = {intents: props.allIntents, selected:0, onIntentClick:props.onIntentClick};
    }

    componentWillReceiveProps(props){
        this.setState({intents: props.allIntents});
    }

    render() {
        return (
            <div className="IntentList">
                <div className="IntentList-title">
                    <p>Intents</p>
                </div>
                {
                    this.state.intents.map((intent,index)=>{
                    return <QuestionItem 
                                key={index} intent={intent} index={index} 
                                onClick={this.state.onIntentClick}>
                            </QuestionItem>
                    })
                }
                <br></br>
                <button onClick={this.props.handleAddIntentClick}>Add intent</button>
            </div>  
        );
    }
}

export default IntentList;