content: import React from 'react';
  import { connect } from 'react-redux';
  import classNames from 'classnames';
  
  import { selectNetwork, showNetworks } from '../actions/app-actions';
  import { availableNetworksSelector } from '../selectors/node-networks';
  import NetworkSelectorItem from './network-selector-item';
  
  class NetworkSelector extends React.Component {
  
    constructor(props, context) {
      super(props, context);
      this.onClick = this.onClick.bind(this);
      this.onMouseOut = this.onMouseOut.bind(this);
    }
  
    onClick() {
      return this.props.showNetworks(!this.props.showingNetworks);
    }
  
    onMouseOut() {
      this.props.selectNetwork(this.props.pinnedNetwork);
    }
  
    render() {
      const { availableNetworks, showingNetworks } = this.props;
  
      const items = availableNetworks.map(network => (
        <NetworkSelectorItem key={network.get('id')} network={network} />
      ));
  
      const className = classNames('network-selector-action', {
        'network-selector-action-selected': showingNetworks
      });
  
      const style = {
        borderBottomColor: showingNetworks ? '#A2A0B3' : 'transparent'
      };
  
      return (
        <div className="network-selector">
          <div className="network-selector-wrapper" onMouseLeave={this.onMouseOut}>
            <div className={className} onClick={this.onClick} style={style}>
              Networks
            </div>
            {showingNetworks && items}
          </div>
        </div>
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      availableNetworks: availableNetworksSelector(state),
      showingNetworks: state.get('showingNetworks'),
      pinnedNetwork: state.get('pinnedNetwork')
    };
  }
  
  export default connect(
    mapStateToProps,
    { selectNetwork, showNetworks }
  )(NetworkSelector);
  