text: import React from 'react';
  import PropTypes from 'prop-types';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import {
    compose,
    lifecycle,
    setPropTypes,
    withHandlers
  } from 'recompose';
  import classNames from 'classnames';
  
  import MessageWidget from '@ciscospark/widget-message';
  import MeetWidget from '@ciscospark/widget-meet';
  import RosterWidget from '@ciscospark/widget-roster';
  import FilesWidget from '@ciscospark/widget-files';
  
  import {
    ICON_TYPE_CONTACT,
    ICON_TYPE_FILES,
    ICON_TYPE_MESSAGE_OUTLINE,
    ICON_TYPE_VIDEO_OUTLINE
  } from '@ciscospark/react-component-icon';
  import {
    getFeature,
    FEATURE_GROUP_CALLING,
    FEATURE_ROSTER
  } from '@ciscospark/redux-module-features';
  
  import {
    updateWidgetStatus,
    updateActivityType,
    storeActivityTypes,
    toggleActivityMenuVisible,
    updateSecondaryActivityType
  } from '../actions';
  import {eventNames} from '../events';
  import styles from '../styles.css';
  
  const ACTIVITY_TYPE_PRIMARY = 'ACTIVITY_TYPE_PRIMARY';
  const ACTIVITY_TYPE_SECONDARY = 'ACTIVITY_TYPE_SECONDARY';
  const DEFAULT_ACTIVITY = 'message';
  
  export const propTypes = {
    initialActivity: PropTypes.string
  };
  
  
  /**
   * Builds widget elements from activityTypes list
   *
   * @param {List} activityTypes Immutable List of activity types
   * @param {String} primaryActivityType Active activity type
   * @returns {Array} of Widget elements
   */
  
  function constructActivityWidgets(props) {
    return (activityTypes, primaryActivityType) => activityTypes
      .filter((activityType) => activityType.type !== ACTIVITY_TYPE_SECONDARY)
      .map((a) => {
        // Only allow widget if it's available for this space type
        const Widget = a.component;
        const isVisible = primaryActivityType === a.name ? '' : styles.hidden;
        return (
          <div
            className={classNames(`ciscospark-${a.name}-wrapper`, styles.activityComponentWrapper, isVisible)}
            key={a.name}
          >
            <Widget
              {...props}
              eventNames={eventNames}
              injectProvider={false}
              toPerson={props.spaceDetails.get('toPerson')}
            />
          </div>
        );
      });
  }
  
  /**
   * Builds secondary widget elements
   *
   * @param {Object} props
   * @returns {Function}
   */
  function constructSecondaryActivityWidget(props) {
    return (activityTypes, secondaryActivityType) => {
      if (!secondaryActivityType) {
        return null;
      }
      return activityTypes
        .filter((activityType) =>
          activityType.type === ACTIVITY_TYPE_SECONDARY && activityType.name === secondaryActivityType)
        .map((activityType) => {
          const Widget = activityType.component;
          return (
            <div
              className={classNames('ciscospark-secondary-widget', styles.secondaryWidget)}
              key={activityType.name}
            >
              <Widget
                {...props}
                {...activityType.props}
                eventNames={eventNames}
                injectProvider={false}
              />
            </div>
          );
        });
    };
  }
  
  function handleActivityChange(props) {
    return (activity) => {
      if (activity.type === ACTIVITY_TYPE_PRIMARY) {
        props.updateActivityType(activity.name);
      }
      else {
        props.updateSecondaryActivityType(activity.name);
      }
    };
  }
  
  function handleSecondaryDismiss(props) {
    return () => props.updateSecondaryActivityType(null);
  }
  
  function handleMenuClick(props) {
    return () => props.toggleActivityMenuVisible();
  }
  
  
  function getFeatureFlags(props) {
    const {
      widgetSpace,
      widgetStatus
    } = props;
    if (widgetStatus.get('hasFetchedFeatureFlags') || widgetStatus.get('isFetchingFeatureFlags')) {
      return;
    }
    props.updateWidgetStatus({isFetchingFeatureFlags: true});
    widgetSpace.get('activityTypes').toJS().forEach((activityType) => {
      if (!activityType.feature) {
        return;
      }
      props.getFeature(activityType.feature.type, activityType.feature.key, props.sparkInstance);
    });
    props.updateWidgetStatus({hasFetchedFeatureFlags: true, isFetchingFeatureFlags: false});
  }
  
  
  export default compose(
    connect(
      (state) => state,
      (dispatch) => bindActionCreators({
        getFeature,
        updateWidgetStatus,
        updateActivityType,
        storeActivityTypes,
        toggleActivityMenuVisible,
        updateSecondaryActivityType
      }, dispatch)
    ),
    setPropTypes(propTypes),
    withHandlers({
      handleSecondaryDismiss,
      handleMenuClick,
      handleActivityChange,
      constructActivityWidgets,
      constructSecondaryActivityWidget
    }),
    lifecycle({
      componentWillMount() {
        const {
          props
        } = this;
        // Store activity types used in widget
  
        const DEFAULT_ACTIVITY_TYPES = [
          {
            displayName: 'Message',
            name: 'message',
            buttonClassName: styles.messageButton,
            iconClassName: ICON_TYPE_MESSAGE_OUTLINE,
            component: MessageWidget,
            spaceTypes: ['group', 'direct'],
            type: ACTIVITY_TYPE_PRIMARY
          },
          {
            displayName: 'Call',
            name: 'meet',
            buttonClassName: styles.meetButton,
            iconClassName: ICON_TYPE_VIDEO_OUTLINE,
            component: MeetWidget,
            spaceTypes: ['direct', 'group'],
            type: ACTIVITY_TYPE_PRIMARY,
            feature: {
              type: 'developer',
              key: FEATURE_GROUP_CALLING
            }
          },
          {
            displayName: 'Call',
            name: 'meet',
            buttonClassName: styles.meetButton,
            iconClassName: ICON_TYPE_VIDEO_OUTLINE,
            component: MeetWidget,
            spaceTypes: ['direct'],
            type: ACTIVITY_TYPE_PRIMARY,
            feature: {
              type: 'developer',
              key: FEATURE_GROUP_CALLING,
              // Hide this option if feature flag is set
              hide: true
            }
          },
          {
            displayName: 'People',
            name: 'people',
            buttonClassName: styles.peopleButton,
            iconClassName: ICON_TYPE_CONTACT,
            component: RosterWidget,
            spaceTypes: ['direct', 'group'],
            type: ACTIVITY_TYPE_SECONDARY,
            props: {
              onClickClose: props.handleSecondaryDismiss,
              onClickMenu: props.handleMenuClick
            },
            feature: {
              type: 'developer',
              key: FEATURE_ROSTER
            }
          },
          {
            displayName: 'Files',
            name: 'files',
            buttonClassName: styles.filesButton,
            iconClassName: ICON_TYPE_FILES,
            component: FilesWidget,
            spaceTypes: ['direct', 'group'],
            type: ACTIVITY_TYPE_SECONDARY,
            props: {
              onClickClose: props.handleSecondaryDismiss,
              onClickMenu: props.handleMenuClick
            }
          }
        ];
  
        let activityTypes = DEFAULT_ACTIVITY_TYPES;
        if (typeof props.customActivityTypes === 'object') {
          activityTypes = activityTypes.concat(props.customActivityTypes);
        }
        props.storeActivityTypes(activityTypes);
      },
      componentWillReceiveProps(nextProps) {
        const {
          activityTypes,
          spaceDetails,
          sparkInstance,
          sparkState,
          initialActivity,
          call
        } = nextProps;
        const {props} = this;
        // Set the initial activity once we get space details
        if (sparkInstance
          && sparkState.get('authenticated')
          && sparkState.get('registered')
          && !sparkState.get('hasError')) {
          getFeatureFlags(nextProps);
        }
        if (!props.spaceDetails && spaceDetails) {
          if (activityTypes.find((a) => a.name === initialActivity)) {
            props.updateActivityType(initialActivity);
          }
          else {
            props.updateActivityType(DEFAULT_ACTIVITY);
          }
        }
  
        const prevCall = props.call;
        // Switch to Meet if ringing
        if (call && !prevCall) {
          nextProps.updateActivityType('meet');
        }
  
        // Reset back to message view after call ends
        if (prevCall && !call) {
          nextProps.updateActivityType('message');
        }
      }
    })
  );
  