import React from 'react';
import Comment from './Comment';
import LinearProgress from 'material-ui/LinearProgress';


/*****
 *  chatId - unique id of chat widget
 *  commentHistory - {type: 'Comment', timestamp, message, name: (initials to be shown ), title, contactNumber, department}
 *                  {type: 'Document', timestamp, url, documentName, name: (initials to be shown ), title, contactNumber, department}
 *
 *  documentData - {lastUpdatedTimestamp, documentName, url, userDetail: {name}}
 *  loadingCommentHistory - boolean
 *  uploadingDocument - boolean
 *  onAddComment - function(chatId, comment)
 *  onUploadFiles - function(event, chatId)
 *  onCommentChange - function(comment)
 *
 */
export default class ChatBox extends React.Component{

    constructor(props) {
        super(props);
    }

    render(){

        return (
            <div className="ticket-comments">
                <Comment
                    chatId={this.props.chatId}
                    commentHistory={this.props.commentHistory}
                    documentData={this.props.documentData}
                    loadingCommentHistory={this.props.loadingCommentHistory}
                    onAddComment={this.props.onAddComment}
                    onUploadFiles={this.props.onUploadFiles}
                    onCommentChange={this.props.onCommentChange}
                    extraTabComponents={this.props.extraTabComponents}
                />
                {
                    (this.props.uploadingDocument)?
                        <div className="file-loader">
                            <LinearProgress
                                mode="indeterminate"
                                color="#dd712f"
                            />
                            <p>Uploading file...</p>
                            {/*<div className="icons cancel-upload-icon" onClick={this.props.cancelFileUppload}>*/}
                            {/*<i className="material-icons">close</i>*/}
                            {/*</div>*/}
                        </div>
                        :
                        ''
                }
            </div>

        );
    }
}
