import React, { Component } from 'react';
import {Button} from 'react-md';
import '../css/Intent.css'
import {INTENT_TITLE_MAX_LENGTH, INTENT_TITLE_TOOLTIP_DELAY} from '../config'

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

        this.state={intent: props.intent, index: props.index, onClick: props.onClick};
    }
  
    render() {
        let buttonTitle = this.state.intent.intentName;
        if (buttonTitle.length > INTENT_TITLE_MAX_LENGTH){
            buttonTitle = this.state.intent.intentName.substr(0,INTENT_TITLE_MAX_LENGTH-1) + '. . .';
        }
        return (
            <div>
                <Button className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'}
                        onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}
                        flat
                        disabled={this.props.waiting}
                        tooltipDelay={INTENT_TITLE_TOOLTIP_DELAY}
                        tooltipLabel={this.state.intent.intentName.length>INTENT_TITLE_MAX_LENGTH ? this.state.intent.questions[0] : ''}>
                            {buttonTitle}
                </Button>  
                <br></br>
            </div>
        );
    }
}

export default IntentItem;