import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import sessionStatus from 'ringcentral-integration/modules/Webphone/sessionStatus';
import calleeTypes from 'ringcentral-integration/enums/calleeTypes';
import styles from './styles.scss';
import i18n from './i18n';
import CallAvatar from '../CallAvatar';

class MergeInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lastCallAvatar: null,
      lastCallInfoTimeout: false
    };
    this.mounted = false;
  }
  componentWillUnmount() {
    this.mounted = false;
  }
  componentDidMount() {
    this.mounted = true;
    const { lastCallInfo, getAvatarUrl } = this.props;
    if (lastCallInfo && !lastCallInfo.avatarUrl && lastCallInfo.lastCallContact) {
      getAvatarUrl(lastCallInfo.lastCallContact).then((lastCallAvatar) => {
        if (this.mounted) {
          this.setState({
            lastCallAvatar,
          });
        }
      });
    } else {
      setTimeout(() => {
        this.setState({
          lastCallInfoTimeout: true
        });
      }, this.props.checkLastCallInfoTimeout);
    }
  }
  render() {
    const {
      currentLocale,
      timeCounter,
      lastCallInfo,
      currentCallTitle,
      currentCallAvatarUrl,
      formatPhone,
    } = this.props;
    if (!lastCallInfo) {
      return null;
    }
    const { lastCallAvatar, lastCallInfoTimeout } = this.state;
    const isLastCallInfoReady = lastCallInfoTimeout || (
      !!lastCallInfo && (!!lastCallInfo.name || !!lastCallInfo.phoneNumber)
    );
    const isLastCallEnded = lastCallInfo && lastCallInfo.status === sessionStatus.finished;
    const statusClasses = classnames({
      [styles.callee_status]: true,
      [styles.callee_status_disconnected]: !!isLastCallEnded,
    });

    const isOnConferenCall = !!(
      lastCallInfo && lastCallInfo.calleeType === calleeTypes.conference
    );
    const isContacts = !!(
      lastCallInfo && lastCallInfo.calleeType === calleeTypes.contacts
    );
    const calleeName = isContacts ? lastCallInfo.name : formatPhone(lastCallInfo.phoneNumber);
    const loadingText = i18n.getString('loading');
    return (
      <div className={styles.mergeInfo}>
        <div className={styles.merge_item}>
          <div className={styles.callee_avatar}>
            <CallAvatar
              avatarUrl={isContacts && !lastCallInfo.avatarUrl
                ? lastCallAvatar
                : lastCallInfo.avatarUrl}
              extraNum={isOnConferenCall ? lastCallInfo.extraNum : 0}
              isOnConferenceCall={isOnConferenCall}
              spinnerMode={!isLastCallInfoReady}
              />
          </div>
          {
            isLastCallInfoReady && (
              <div className={styles.callee_name}>
                {
                  isOnConferenCall
                  ? <span title={i18n.getString('conferenceCall', currentLocale)}>{i18n.getString('conferenceCall', currentLocale)} </span>
                  : <span title={calleeName}>{calleeName}</span>
                }
              </div>
            )
          }
          {
            !isLastCallInfoReady && (
              <div className={styles.callee_name}>
                <span title={loadingText}>{loadingText}</span>
              </div>
            )
          }

          {
            isLastCallInfoReady && (
              <div className={statusClasses}>
                {lastCallInfo.status === sessionStatus.finished
                ? i18n.getString('disconnected', currentLocale)
                : i18n.getString('onHold', currentLocale)}
              </div>
            )
          }

        </div>
        <div className={styles.merge_item_active}>
          <div className={styles.callee_avatar_active} >
            {
                currentCallAvatarUrl
                  ? <CallAvatar avatarUrl={currentCallAvatarUrl} />
                  : <CallAvatar avatarUrl={null} />
              }
          </div>
          <div className={styles.callee_name_active}>
            <span title={currentCallTitle}>{currentCallTitle}</span>
          </div>
          <div className={styles.callee_status_active}>
            {timeCounter}
          </div>
        </div>
      </div>
    );
  }
}

MergeInfo.propTypes = {
  currentLocale: PropTypes.string.isRequired,
  timeCounter: PropTypes.element.isRequired,
  lastCallInfo: PropTypes.object,
  currentCallTitle: PropTypes.string,
  currentCallAvatarUrl: PropTypes.string,
  formatPhone: PropTypes.func,
  getAvatarUrl: PropTypes.func,
  checkLastCallInfoTimeout: PropTypes.number,
};

MergeInfo.defaultProps = {
  lastCallInfo: { calleeType: calleeTypes.unknow },
  currentCallTitle: undefined,
  currentCallAvatarUrl: undefined,
  formatPhone: () => null,
  getAvatarUrl: () => null,

  /**
   * The timeout seconds to check if the last call info is received.
   */
  checkLastCallInfoTimeout: 30 * 1000,
};

export default MergeInfo;

@@ -551,32 +551,33 @@
 ed = false;%0A  %7D%0A
+%0A
   componentWillU
@@ -617,16 +617,17 @@
 se;%0A  %7D%0A
+%0A
   compon
@@ -1031,24 +1031,54 @@
 out(() =%3E %7B%0A
+        if (this.mounted) %7B%0A  
         this
@@ -1081,32 +1081,34 @@
 this.setState(%7B%0A
+  
           lastCa
@@ -1131,28 +1131,40 @@
 rue%0A        
+  
 %7D);%0A
+        %7D%0A
       %7D, thi
@@ -1208,16 +1208,17 @@
   %7D%0A  %7D%0A
+%0A
   render
@@ -2721,18 +2721,16 @@
 oReady%7D%0A
-  
         
@@ -2732,24 +2732,24 @@
          /%3E%0A
+
           %3C/
@@ -2924,17 +2924,43 @@
         
-?
+  ? (%0A                     
  %3Cspan t
@@ -3014,16 +3014,41 @@
 ocale)%7D%3E
+%0A                        
 %7Bi18n.ge
@@ -3088,16 +3088,38 @@
 Locale)%7D
+%0A                     
  %3C/span%3E
@@ -3137,17 +3137,65 @@
         
-:
+  )%0A                    : (%0A                     
  %3Cspan t
@@ -3224,32 +3224,54 @@
 leeName%7D%3C/span%3E%0A
+                    )%0A
                 
@@ -3643,16 +3643,35 @@
        %7B
+%0A                  
 lastCall
@@ -3725,16 +3725,20 @@
         
+   
+ 
 ? i18n.g
@@ -3793,16 +3793,20 @@
         
+    
 : i18n.g
@@ -3830,32 +3830,49 @@
 , currentLocale)
+%0A                
 %7D%0A              
@@ -4052,26 +4052,24 @@
             
-  
 currentCallA
@@ -4069,34 +4069,32 @@
 ntCallAvatarUrl%0A
-  
                 
@@ -4159,18 +4159,16 @@
         
-  
 : %3CCallA
@@ -4189,26 +4189,24 @@
 l=%7Bnull%7D /%3E%0A
-  
             

fix react warning (#1039)