components/TopBar/LeagueSelection.js

/**
 * @module TopBar/LeagueSelection
 */
import React, { Component } from 'react';
import { isLivePage } from '../../utils/common';
import Constants, { GAME_TYPE } from '../../constants';
/**
 * @typedef {object} props
 * @property {boolean} isLeagueSelectionOpen
 * @property {boolean} turbo
 * @property {Array} leagues
 * @property {string} cnt
 * @property {string} currentPage
 * @property {object} user
 * @property {string} gameType
 * @property {number} selectedLeagueIndex
 * @property {Function} toggleLeagueSelectionModal Close Account menu and Bonus
 * @property {Function} setSelectedLeague
 */
export default class LeagueSelection extends Component {
  /**
   * Change selected league
   *
   * @function
   * @param {object} league
   * @param {string} type Can be 'Classic' or 'Turbo'
   * @param {number} index Selected league index
   * @returns {void}
   */
  changeSelectedLeague = (league, type, index) => {
    this.props.toggleLeagueSelectionModal(true);
    this.props.setSelectedLeague({ league, type, index });
    if (this.props.haveLiveMatches && this.props.gameType === type
      && this.props.currentPage !== Constants.PAGES.BETS) {
      this.props.setCurrentPage({ page: Constants.PAGES.LIVE });
    } else {
      this.props.setCurrentPage({ page: Constants.PAGES.BETS });
    }
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div
        className={`leagues__dd collapse ${this.props.isLeagueSelectionOpen ? 'show' : ''}`}
        id="league__dd"
        data-parent="#market"
      >
        <div className="leagues__dd-title">Stadium</div>

        {/* Classic */}
        <div className="leagues__dd-wrap">
          {this.props.leagues.map((league, index) => {
            const enabled = isLivePage(this.props.currentPage)
              ? league.liveEnabled : league.enabled;
            return enabled ? (
              <div
                key={`ls-classic-${league.id}`}
                className={`leagues__dd-item${this.props.gameType === GAME_TYPE.CLASSIC

                  && this.props.selectedLeagueIndex === index
                  ? ' active'
                  : ''
                }`}
                onClick={this.changeSelectedLeague.bind(null, league, GAME_TYPE.CLASSIC, index)}
              >
                <div className={`live-nav__item-img ${league.flag}_flag`} />
                <div className="leagues__dd-item-title">
                  {league.name}
                </div>
              </div>
            ) : null;
          })}
        </div>
        {/* Turbo */}
        {this.props.user
          && this.props.user.turboEnabled
          && this.props.turbo && (<div className="leagues__dd-title">Stadium Turbo</div>)}
        <div className="leagues__dd-wrap">
          {this.props.user
            && this.props.user.turboEnabled
            && this.props.turbo
            && this.props.leagues.map((league, index) => (league.enabled ? (
              <div
                key={`ls-turbo-${league.id}`}
                className={`leagues__dd-item ${this.props.gameType === GAME_TYPE.TURBO
                  && this.props.selectedLeagueIndex === index
                  ? 'active'
                  : ''
                }`}
                onClick={this.changeSelectedLeague.bind(null, league, GAME_TYPE.TURBO, index)}
              >
                <div className={`live-nav__item-img ${league.flag}-turbo_flag`} />
                <div className="leagues__dd-item-title">
                  {league.name}
                  {' '}
                  Turbo
                </div>
              </div>
            ) : null))}
        </div>
      </div>
    );
  }
}