content: import React from 'react';
  import PropTypes from 'prop-types';
  import classnames from 'classnames';
  
  import BackButton from '../BackButton';
  import BackHeader from '../BackHeader';
  import Panel from '../Panel';
  import DurationCounter from '../DurationCounter';
  import ActiveCallPad from '../ActiveCallPad';
  import ContactDisplay from '../ContactDisplay';
  import dynamicsFont from '../../assets/DynamicsFont/DynamicsFont.scss';
  import styles from './styles.scss';
  
  function CallInfo(props) {
    let avatar;
    if (props.avatarUrl) {
      avatar = (<img src={props.avatarUrl} alt="avatar" />);
    } else {
      avatar = (<i className={classnames(dynamicsFont.portrait, styles.icon)} />);
    }
    return (
      <div className={styles.userInfo}>
        <div className={styles.avatarContainer}>
          <div className={styles.avatar}>
            {avatar}
          </div>
        </div>
        <div className={styles.userName}>
          <ContactDisplay
            className={styles.contactDisplay}
            selectClassName={styles.dropdown}
            contactMatches={props.nameMatches}
            phoneNumber={props.phoneNumber}
            fallBackName={props.fallBackName}
            currentLocale={props.currentLocale}
            areaCode={props.areaCode}
            countryCode={props.countryCode}
            showType={false}
            disabled={false}
            selected={props.selectedMatcherIndex}
            onSelectContact={props.onSelectMatcherName}
            isLogging={false}
            enableContactFallback
            brand={props.brand}
            showPlaceholder={props.showContactDisplayPlaceholder}
            sourceIcons={props.sourceIcons}
          />
        </div>
        <div className={styles.userPhoneNumber}>
          {props.formatPhone(props.phoneNumber)}
        </div>
      </div>
    );
  }
  
  CallInfo.propTypes = {
    phoneNumber: PropTypes.string,
    formatPhone: PropTypes.func.isRequired,
    nameMatches: PropTypes.array.isRequired,
    fallBackName: PropTypes.string.isRequired,
    areaCode: PropTypes.string.isRequired,
    countryCode: PropTypes.string.isRequired,
    currentLocale: PropTypes.string.isRequired,
    selectedMatcherIndex: PropTypes.number.isRequired,
    onSelectMatcherName: PropTypes.func.isRequired,
    avatarUrl: PropTypes.string,
    brand: PropTypes.string,
    showContactDisplayPlaceholder: PropTypes.bool,
    sourceIcons: PropTypes.object,
  };
  
  CallInfo.defaultProps = {
    phoneNumber: null,
    avatarUrl: null,
    brand: 'RingCentral',
    showContactDisplayPlaceholder: true,
    sourceIcons: undefined,
  };
  
  function ActiveCallPanel({
    onBackButtonClick,
    backButtonLabel,
    currentLocale,
    nameMatches,
    fallBackName,
    phoneNumber,
    formatPhone,
    startTime,
    startTimeOffset,
    areaCode,
    countryCode,
    selectedMatcherIndex,
    onSelectMatcherName,
    avatarUrl,
    isOnMute,
    isOnHold,
    recordStatus,
    onMute,
    onUnmute,
    onHold,
    onUnhold,
    onRecord,
    onStopRecord,
    onShowKeyPad,
    onHangup,
    onPark,
    onAdd,
    onShowFlipPanel,
    onToggleTransferPanel,
    children,
    showContactDisplayPlaceholder,
    brand,
    flipNumbers,
    calls,
    sourceIcons,
  }) {
    const timeCounter = startTime ?
      (
        <span className={styles.timeCounter}>
          <DurationCounter startTime={startTime} offset={startTimeOffset} />
        </span>
      ) : null;
    const backHeader = calls.length > 1 ? (
      <BackHeader
        onBackClick={onBackButtonClick}
        backButton={<BackButton label={backButtonLabel} />}
      />
    ) : <BackHeader className={styles.hidden} />;
    return (
      <div className={styles.root}>
        {backHeader}
        <Panel className={styles.panel}>
          {timeCounter}
          <CallInfo
            currentLocale={currentLocale}
            nameMatches={nameMatches}
            fallBackName={fallBackName}
            phoneNumber={phoneNumber}
            formatPhone={formatPhone}
            startTime={startTime}
            areaCode={areaCode}
            countryCode={countryCode}
            selectedMatcherIndex={selectedMatcherIndex}
            onSelectMatcherName={onSelectMatcherName}
            avatarUrl={avatarUrl}
            brand={brand}
            showContactDisplayPlaceholder={showContactDisplayPlaceholder}
            sourceIcons={sourceIcons}
          />
          <ActiveCallPad
            className={styles.callPad}
            currentLocale={currentLocale}
            isOnMute={isOnMute}
            isOnHold={isOnHold}
            recordStatus={recordStatus}
            onMute={onMute}
            onUnmute={onUnmute}
            onHold={onHold}
            onUnhold={onUnhold}
            onRecord={onRecord}
            onStopRecord={onStopRecord}
            onShowKeyPad={onShowKeyPad}
            onHangup={onHangup}
            onAdd={onAdd}
            onShowFlipPanel={onShowFlipPanel}
            onToggleTransferPanel={onToggleTransferPanel}
            flipNumbers={flipNumbers}
            onPark={onPark}
          />
          {children}
        </Panel>
      </div>
    );
  }
  
  ActiveCallPanel.propTypes = {
    phoneNumber: PropTypes.string,
    nameMatches: PropTypes.array.isRequired,
    fallBackName: PropTypes.string.isRequired,
    currentLocale: PropTypes.string.isRequired,
    startTime: PropTypes.number,
    startTimeOffset: PropTypes.number,
    isOnMute: PropTypes.bool,
    isOnHold: PropTypes.bool,
    recordStatus: PropTypes.string.isRequired,
    onMute: PropTypes.func.isRequired,
    onUnmute: PropTypes.func.isRequired,
    onHold: PropTypes.func.isRequired,
    onUnhold: PropTypes.func.isRequired,
    onRecord: PropTypes.func.isRequired,
    onStopRecord: PropTypes.func.isRequired,
    onAdd: PropTypes.func.isRequired,
    onHangup: PropTypes.func.isRequired,
    onPark: PropTypes.func.isRequired,
    onBackButtonClick: PropTypes.func.isRequired,
    onShowKeyPad: PropTypes.func.isRequired,
    formatPhone: PropTypes.func.isRequired,
    children: PropTypes.node,
    areaCode: PropTypes.string.isRequired,
    countryCode: PropTypes.string.isRequired,
    selectedMatcherIndex: PropTypes.number.isRequired,
    onSelectMatcherName: PropTypes.func.isRequired,
    avatarUrl: PropTypes.string,
    backButtonLabel: PropTypes.string,
    brand: PropTypes.string,
    showContactDisplayPlaceholder: PropTypes.bool,
    onShowFlipPanel: PropTypes.func,
    flipNumbers: PropTypes.array,
    calls: PropTypes.array.isRequired,
    onToggleTransferPanel: PropTypes.func,
    sourceIcons: PropTypes.object,
  };
  
  ActiveCallPanel.defaultProps = {
    startTime: null,
    startTimeOffset: 0,
    isOnMute: false,
    isOnHold: false,
    phoneNumber: null,
    children: undefined,
    avatarUrl: null,
    backButtonLabel: 'Active Calls',
    brand: 'RingCentral',
    showContactDisplayPlaceholder: true,
    flipNumbers: [],
    onShowFlipPanel: () => null,
    onToggleTransferPanel: () => null,
    sourceIcons: undefined,
  };
  
  export default ActiveCallPanel;
  