text: import React, {Component} from 'react';
  import PropTypes from 'prop-types';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import classNames from 'classnames';
  import {compose} from 'recompose';
  import {Button, Icon} from '@momentum-ui/react';
  
  import TitleBar from '@webex/react-component-title-bar';
  import LoadingScreen from '@webex/react-component-loading-screen';
  import Timer from '@webex/react-component-timer';
  import ErrorDisplay from '@webex/react-component-error-display';
  
  import ActivityMenu from './components/activity-menu';
  
  import {storeDestination} from './actions';
  import messages from './messages';
  
  import './momentum.scss';
  import styles from './styles.css';
  
  import enhancers from './enhancers';
  
  import {propTypes as activityMenuPropTypes} from './enhancers/activity-menu';
  
  
  const injectedPropTypes = {
    activityTypes: PropTypes.array.isRequired,
    call: PropTypes.object,
    conversation: PropTypes.object.isRequired,
    currentActivity: PropTypes.string,
    errors: PropTypes.object.isRequired,
    sparkInstance: PropTypes.object,
    widgetSpace: PropTypes.object.isRequired
  };
  
  export const ownPropTypes = {
    composerActions: PropTypes.shape({
      attachFiles: PropTypes.bool
    }),
    customActivityTypes: PropTypes.object,
    destinationId: PropTypes.string,
    destinationType: PropTypes.oneOf(['email', 'userId', 'spaceId', 'sip', 'pstn']),
    muteNotifications: PropTypes.bool,
    secondaryActivitiesFullWidth: PropTypes.bool,
    setCurrentActivity: PropTypes.string,
    spaceActivities: PropTypes.shape({
      files: PropTypes.bool,
      meet: PropTypes.bool,
      message: PropTypes.bool,
      people: PropTypes.bool
    }),
    startCall: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.bool
    ]),
    ...activityMenuPropTypes,
    ...injectedPropTypes
  };
  
  const defaultProps = {
    composerActions: {
      attachFiles: true
    },
    customActivityTypes: undefined,
    destinationId: null,
    destinationType: null,
    muteNotifications: false,
    secondaryActivitiesFullWidth: true,
    setCurrentActivity: '',
    spaceActivities: {
      files: true,
      meet: true,
      message: true,
      people: true
    },
    startCall: false
  };
  
  export class SpaceWidget extends Component {
    render() {
      const {props} = this;
      const {
        activityTypes,
        call,
        conversation,
        currentActivity,
        composerActions,
        sparkInstance,
        spaceDetails,
        errors,
        widgetSpace,
        widgetStatus
      } = props;
      const {formatMessage} = props.intl;
      let errorElement;
  
      if (errors.get('hasError') || conversation.getIn(['status', 'error'])) {
        let widgetError = errors.get('errors').first();
  
        if (!widgetError) {
          widgetError = {
            displaySubtitle: conversation.getIn(['status', 'error', 'description']),
            temporary: false,
            title: formatMessage(messages.errorConversation)
          };
        }
        errorElement = (
          <div className={classNames('webex-error-wrapper', styles.errorWrapper)}>
            <ErrorDisplay
              secondaryTitle={widgetError.displaySubtitle}
              title={widgetError.displayTitle}
              transparent={widgetError.temporary}
              {...widgetError}
            />
          </div>
        );
      }
      if (sparkInstance && spaceDetails) {
        // Construct widgets
        const primaryActivityType = widgetSpace.get('primaryActivityType');
        const secondaryActivityType = widgetSpace.get('secondaryActivityType');
        const widgets = props.constructActivityWidgets(activityTypes, primaryActivityType, composerActions);
        const secondaryWidget = props.constructSecondaryActivityWidget(activityTypes, secondaryActivityType);
        const {avatarId, title = 'Loading...'} = spaceDetails;
  
        let menuButton;
        const callStartTime = call && call.startTime;
  
        if (activityTypes && activityTypes.length === 2) {
          const otherActivity = activityTypes.filter((activity) => currentActivity !== activity.name);
          const buttonType = otherActivity[0].name === 'people' ? 'people' : otherActivity[0].buttonType;
  
          menuButton = (
            <Button
              ariaLabel={otherActivity[0].displayName}
              circle
              size={40}
              onClick={() => props.handleActivityChange(otherActivity[0])}
            >
              <Icon name={`icon-${buttonType}_16`} />
            </Button>
          );
        }
        if (activityTypes && activityTypes.length > 2) {
          menuButton = (
            <Button
              ariaLabel="Main Menu"
              circle
              size={40}
              onClick={props.handleMenuClick}
            >
              <Icon name="icon-activities_18" />
            </Button>
          );
        }
  
        return (
          <div className={classNames('webex-space-widget', 'md', styles.spaceWidget)}>
            { errorElement }
            {
              widgetStatus.get('activityMenuVisible') &&
              <div className={classNames('webex-activity-menu-wrapper', styles.activityMenuWrapper)}>
                <ActivityMenu
                  activityTypes={activityTypes}
                  onChange={props.handleActivityChange}
                  onExit={props.handleMenuClick}
                  showExitButton
                />
              </div>
            }
            {
              secondaryWidget
            }
            <div className={classNames('webex-title-bar-wrapper', styles.titleBarWrapper)}>
              <TitleBar avatarId={avatarId} name={title} type={spaceDetails.type}>
                {
                  callStartTime &&
                  <div className={classNames('webex-title-bar-call-timer', styles.callTimer)}>
                    <Timer startTime={callStartTime} />
                  </div>
                }
                <div className={classNames('webex-activity-menu-button-wrapper', styles.activityMenuButtonWrapper)}>
                  <div className={classNames('webex-activity-menu-button', styles.activityMenuButton)}>
                    {menuButton}
                  </div>
                </div>
              </TitleBar>
            </div>
            <div className={classNames('webex-widget-body', styles.widgetBody)}>
              {widgets}
            </div>
          </div>
        );
      }
      if (errors.get('hasError')) {
        return errorElement;
      }
  
      return <LoadingScreen />;
    }
  }
  
  SpaceWidget.propTypes = ownPropTypes;
  SpaceWidget.defaultProps = defaultProps;
  
  
  export default compose(
    connect(
      null,
      (dispatch) => bindActionCreators({
        storeDestination
      }, dispatch)
    ),
    ...enhancers
  )(SpaceWidget);
  