content: import React from 'react';
  import { Link } from 'react-router';
  
  import firebaseApp from '../../modules/firebase';
  
  import convertObjectPropertiesToArray from '../../modules/utilities/convert-object-properties-to-array';
  import orderArrayAlphabeticallyByObjectKey from '../../modules/utilities/order-array-alphabetically-by-object-key';
  import deslugify from '../../modules/utilities/deslugify';
  import slugify from '../../modules/utilities/slugify';
  
  class SequentialNavBarComponent extends React.Component {
  
      constructor (props) {
          super(props);
  
          // We must have a currentClub and league parameter to proceed
          if (typeof this.props.currentClub !== 'string' || typeof this.props.league !== 'string') {
              return false;
          }
  
          this.state = {
              league: this.props.league,
              nextLabel: null,
              nextLink: null,
              nextTitle: null,
              previousLabel: null,
              previousLink: null,
              previousTitle: null
          };
      }
  
      componentWillReceiveProps(nextProps) {
  
          // Get the clubs in this league from the database
          firebaseApp.database().ref('clubs/' + this.props.league).on('value', snapshot => {
              const clubsInLeague = snapshot.val().teams;
  
              let previousClub = null;
              let nextClub = null;
  
              // Loop through the clubs
              clubsInLeague.forEach((club, index) => {
                  // Check if this iteration matches the current club
                  if (club === this.props.currentClub) {
                      // We have a match, we can start to assign the previous and next club state data
                      if (clubsInLeague[index - 1]) {
                          previousClub = clubsInLeague[index - 1];
                      } else {
                          previousClub = clubsInLeague[clubsInLeague.length - 1];
                      }
                      if (clubsInLeague[index + 1]) {
                          nextClub = clubsInLeague[index + 1];
                      } else {
                          nextClub = clubsInLeague[0];
                      }
                  }
              });
  
              this.setState({
                  nextLabel: nextClub ? deslugify(nextClub) : null,
                  nextLink: nextClub ? '/clubs/' + nextClub : null,
                  nextLogo: nextClub ? '/assets/img/logos/scotland/' + nextClub + '.png' : null,
                  nextSlug: nextClub ? nextClub : null,
                  nextTitle: nextClub ? `View the ${nextClub} club page` : null,
                  previousLabel: previousClub ? deslugify(previousClub) : null,
                  previousLink: previousClub ? '/clubs/' + previousClub : null,
                  previousLogo: previousClub ? '/assets/img/logos/scotland/' + previousClub + '.png' : null,
                  previousSlug: previousClub ? previousClub : null,
                  previousTitle: previousClub ? `View the ${previousClub} club page` : null
              });
          });
      }
  
      render() {
          // We must have state to render
          if (this.state.nextLabel === null) {
              return false;
          }
  
          return (
              <div className="sequential-nav-bar">
                  <div className="container">
                      <ul className="sequential-nav-bar__list">
                          <li className="sequential-nav-bar__item sequential-nav-bar__item--previous">
                              <Link className={"sequential-nav-bar__link sequential-nav-bar__link--" + this.state.previousSlug} to={this.state.previousLink} style={{backgroundImage: 'url(' + this.state.previousLogo + ')'}} title={this.state.previousTitle}>
                                  <span className="sequential-nav-bar__text">&larr; {this.state.previousLabel}</span>
                              </Link>
                          </li>
                          <li className="sequential-nav-bar__item sequential-nav-bar__item--next">
                              <Link className={"sequential-nav-bar__link sequential-nav-bar__link--" + this.state.nextSlug} to={this.state.nextLink} style={{backgroundImage: 'url(' + this.state.nextLogo + ')'}} title={this.state.nextTitle}>
                                  <span className="sequential-nav-bar__text">{this.state.nextLabel} &rarr;</span>
                              </Link>
                          </li>
                      </ul>
                  </div>
              </div>
          )
      }
  }
  
  SequentialNavBarComponent.defaultProps = {};
  SequentialNavBarComponent.displayName = 'SequentialNavBarComponent';
  SequentialNavBarComponent.propTypes = {};
  
  export default SequentialNavBarComponent;
  