import React from 'react';
import CircularProgress from 'material-ui/CircularProgress';
import CommentHistory from './CommentHistory';
import Attachments from './Attachments';
import CommentInput from './CommentInput';
import {checkDeepEquals} from '../../UtilitiesFunctions/objectUtilities';
import ReactDOM from 'react-dom';




export default class Comment extends React.Component{

    constructor(props) {
        super(props);
       /* let tabType = props.commentHistory && props.commentHistory.length > 0 ?
         'comment' : ((props.extraTabComponents && Object.keys(props.extraTabComponents).length > 0)
          ? Object.keys(props.extraTabComponents)[0] : 'comment');*/
          let tabType = 'comment';

        this.state = {
                commentValue: '',
                loadingCommentHistory: true,
                tabType: tabType,
                commentHistory: props.commentHistory,
                documentData: props.documentData,
                extraTabComponents: props.extraTabComponents
        };      

    }

    componentDidMount(){

    }

    componentWillReceiveProps(nextProps) {
        debugger
        if(!checkDeepEquals(this.props, nextProps)){
            this.setState({
                loadingCommentHistory: nextProps.loadingCommentHistory,
                commentHistory: nextProps.commentHistory,
                documentData: nextProps.documentData,
                extraTabComponents: nextProps.extraTabComponents

            });
        }
        setTimeout(() => {
            const node = ReactDOM.findDOMNode(this.commentHistoryContainer);
            if(node)
                node.scrollTop = node.scrollHeight;
        }, 0);


    }


    handleTabClick = (value) => {
        this.setState({tabType: value});
    }

    getExtraTabsTitle = (titles) => {
                let self = this;
        return(
          <div>
              {
                  titles.map((title) => {
                      return(
                          <span
                              className={`tab attachment-tab ${self.state.tabType === title?'active':''}`}
                              onClick={this.handleTabClick.bind(self, title)}
                          >
                            {title}
                          </span>
                      )
                  })
              }
          </div>
        );
    }

    getDetailComponent = (tabType) => {
        switch (tabType){
            case 'comment':
                return <CommentHistory
                    commentHistory={this.state.commentHistory}
                />;
            case 'attachment':
                return <Attachments
                    documentData={this.state.documentData}
                />;
            default:
                let Component = this.state.extraTabComponents[tabType];
                return Component;
        }
    }

    // shouldComponentUpdate(nextProps, nextState) {
    //     return checkDeepEquals(this.props, nextProps) ||
    //         checkDeepEquals(this.state, nextState);
    // }


    render(){
        const props = this.props;
        const state = this.state;

        const checkCommentSectionVisibility = (state.commentHistory && state.commentHistory.length > 0 && !this.state.loadingCommentHistory);
        const checkExtraTabVisibility = (state.extraTabComponents && Object.keys(state.extraTabComponents).length > 0 );
        const checkWidgetVisibility = (checkCommentSectionVisibility || checkExtraTabVisibility);
        let extraTabTitles = Object.keys(this.state.extraTabComponents);

        return (
                <div className="ticket-comments">
                {
                    (checkWidgetVisibility)?
                        <div className="comment-history">
                            <div className="comments-tab">
                                {
                                    <span
                                        className={`tab ${this.state.tabType === 'comment' ? 'active' : ''}`}
                                        onClick={this.handleTabClick.bind(this, 'comment')}
                                    >
                                            Comment History
                                        </span>
                                    
                                }
                                {
                                    (checkCommentSectionVisibility && state.documentData && state.documentData.length > 0)?
                                        <span
                                            className={`tab attachment-tab ${this.state.tabType === 'attachment'?'active':''}`}
                                            onClick={this.handleTabClick.bind(this, 'attachment')}
                                        >
                                                    Attachments
                                                </span>
                                        :''
                                }
                                {
                                    checkExtraTabVisibility?
                                        this.getExtraTabsTitle(extraTabTitles)
                                        :''
                                }

                            </div>
                            <div className={`tab-data-container ${this.state.tabType}`} ref={(el) => { this.commentHistoryContainer = el; }}>
                                {
                                    this.getDetailComponent(this.state.tabType)
                                }
                            </div>
                        </div>
                        : ''
                }
                {
                    this.state.loadingCommentHistory?
                        <div className='flex centre-aligned loader comment-history-loader'>
                            <CircularProgress
                                color="rgba(221,113,47,1)"
                            />
                        </div>
                        :''
                }
                {
                    (this.state.tabType === 'comment')?
                        <CommentInput
                            chatId = {this.props.chatId}
                            onAddComment={this.props.onAddComment}
                            onUploadFiles={this.props.onUploadFiles}
                            onCommentChange={this.props.onCommentChange}
                        />
                        :''
                }
            </div>

        );
    }
}
