text: /**
   * ChannelsModal exports the ui rendering functions to display the popup allowing users
   * to interact with each `ChannelItem` child
   */
  
  import React from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { injectIntl } from 'react-intl';
  import { createStructuredSelector } from 'reselect';
  import { compose } from 'redux';
  
  import { makeSelectChannelData } from 'containers/CommunicationProvider/selectors';
  
  import { closeChannelsModal, openJoinModal } from 'components/MainMenu/actions';
  import ChannelItem from 'components/ChannelItem';
  
  import { ListGroup } from 'reactstrap';
  
  import {
    Modal,
    ModalHeader,
    ModalBody,
    ModalFooter,
    Button,
  } from 'components/BaseModal';
  
  import messages from './messages';
  
  export function ChannelsModal({
    onCloseChannelsModal,
    channelData,
    onOpenJoinModal,
    open,
    className,
    intl,
  }) {
    // @todo Move this object into `components/BaseModal`
    const closeBtn = (
      <button type="button" className="close" onClick={onCloseChannelsModal}>
        &times;
      </button>
    );
    const channelsModalTitle = intl.formatMessage(messages.ChannelsModalTitle);
    const cancelText = intl.formatMessage(messages.cancelText);
    const emptyChannelsText = intl.formatMessage(messages.emptyChannelsText);
    const joinNewText = intl.formatMessage(messages.joinNewText);
  
    const channels = Object.keys(channelData);
    let channelsBtns = <div />;
    if (channels.length === 0) {
      channelsBtns = <div key="empty">{emptyChannelsText}</div>;
    } else {
      channelsBtns = channels.map((chan) => (
        <ChannelItem key={`${chan}Btn`} channel={chan} />
      ));
    }
  
    return (
      <div>
        <Modal isOpen={open} toggle={onCloseChannelsModal} className={className}>
          <ModalHeader toggle={onCloseChannelsModal} close={closeBtn}>
            {channelsModalTitle}
          </ModalHeader>
          <ModalBody>
            <ListGroup>{channelsBtns}</ListGroup>
          </ModalBody>
          <ModalFooter>
            <Button
              onClick={() => {
                onCloseChannelsModal();
                onOpenJoinModal();
              }}
            >
              {joinNewText}
            </Button>{' '}
            <Button onClick={onCloseChannelsModal}>{cancelText}</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
  
  ChannelsModal.propTypes = {
    onCloseChannelsModal: PropTypes.func,
    channelData: PropTypes.object.isRequired,
    onOpenJoinModal: PropTypes.func,
    open: PropTypes.bool,
    className: PropTypes.string,
    intl: PropTypes.object.isRequired,
  };
  
  const mapStateToProps = createStructuredSelector({
    channelData: makeSelectChannelData(),
  });
  
  function mapDispatchToProps(dispatch) {
    return {
      onCloseChannelsModal: () => dispatch(closeChannelsModal()),
      onOpenJoinModal: () => dispatch(openJoinModal()),
      dispatch,
    };
  }
  
  const withConnect = connect(mapStateToProps, mapDispatchToProps);
  
  export default compose(withConnect, injectIntl)(ChannelsModal);
  