import React from 'react';




export default class CommentInput extends React.Component{

    constructor(props) {
        super(props);
        this.state = {commentValue: ''};
    }

    fileType = (url) => {
        let extension = url.substr(url.length - 3);
        return extension.toLowerCase();
    }
    handleKeyPress = (event) => {
        if(event.key === 'Enter'){
            this.submitMessage();
        }
    }


    submitMessage = () => {
        if(this.state.commentValue.length >= 2) {
            this.props.onAddComment(this.props.chatId, this.state.commentValue);
            this.setState({commentValue: '', tabType: 'comment'});
        }
    }

    handleCommentChange = (event) => {
        this.setState({commentValue: event.target.value});
        this.props.onCommentChange(event.target.value);
    }
    handleUpload = (event) => {
        if(event.target.files && event.target.files.length > 0)
            this.props.onUploadFiles(event, this.props.chatId);
    }




    render(){
        const props = this.props;
        return (
            <div>
                <p className="comment-title">Comment</p>
                <div className="comment-input">
                    <input
                        type="text"
                        onChange={this.handleCommentChange}
                        onKeyPress={this.handleKeyPress}
                        value={this.state.commentValue}
                        placeholder="Enter your comment here"
                    />
                    <div className="input-icons">
                        <div className={`form-field-content button warning attach-icon`}>
                            <input accept=".pdf,.png,.jpg,.jpeg"
                                   type="file"
                                   name={`file-attachment`}
                                   id={`file-attachment`}
                                   className="inputfile inputfile-button"
                                   title="Supported Docs - Images/pdf"
                                   onChange={this.handleUpload}
                            />
                            <label htmlFor={`file-attachment`}
                                   title="Upload Documents"
                                   className="icon"
                            >
                                <i className="material-icons">&#xE226;</i>
                            </label>
                        </div>
                        <div className="icon">
                            <i className="material-icons send" onClick={this.submitMessage}>send</i>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

