components/TopBar/BetsCountDown.js

/**
 * @module TopBar/BetsCountDown
 */
import React, { Component } from 'react';
import Constants, { SVG_ICONS, GAME_TYPE } from '../../constants';
import SVGComponent from '../SVG/SVGComponent';
import { setupCounter, getTimeFormat, isLivePage } from '../../utils/common';
/**
 * @typedef {object} props
 * @property {number} noBettingTimeCountdown
 * @property {number} liveMatchDuration
 * @property {string} currentPage
 * @property {boolean} placebetDisabled
 * @property {number} noBettingTime
 * @property {object} selectedLeague
 * @property {boolean} isLeagueSelectionOpen
 * @property {boolean} haveLiveMatches
 * @property {string} gameType
 * @property {Function} openModal
 * @property {Function} liveFinished
 * @property {Function} getTickets
 * @property {Function} disablePlacebet
 * @property {Function} toggleLeagueSelectionModal
 */
export default class BetsCountDown extends Component {
  constructor(props) {
    super(props);
    /**
     * @member {object}
     * @property {string} time Time to next live game showen in topbar
     */
    this.state = {
      time: '',
    };
    this.zeroOrLessCount = 0;
  }

  /**
   * Calculate time to next live game, disabling placebet and open no betting time modal
   *
   * @function
   * @param {Time} roundEnd
   * @param {Time} liveStart
   * @returns {void}
   */
  setTime = (roundEnd, liveStart) => {
    const { diffSec, countdown, isLive } = setupCounter(
      roundEnd, liveStart,
      this.props.liveMatchDuration, this.props.noBettingTimeCountdown,
    );

    if (diffSec <= 0 && this.props.currentPage === Constants.PAGES.MY_ACCOUNT_MENU) {
      if (this.props.gameType === GAME_TYPE.CLASSIC) {
        this.props.getRound();
      } else {
        this.props.getTurboRound();
      }
    }

    if (countdown <= -1 && this.props.haveLiveMatches) {
      this.liveFinished();
    } else if (diffSec <= this.props.noBettingTime && diffSec > 1) {
      if (!this.props.placebetDisabled) {
        this.props.disablePlacebet({ placebetDisabled: true });
      }
      if (!this.modalOpened && diffSec <= this.props.noBettingTimeCountdown
        && this.props.currentPage !== Constants.PAGES.MY_ACCOUNT_MENU) {
        this.modalOpened = true;

        this.props.openModal({
          modal: Constants.MODALS.NO_BETTING_TIME,
          props: {
            round:
              isLive ? this.props.selectedLeague.liveWeek : this.props.selectedLeague.week,
            noBettingTimeCountdown: this.props.noBettingTimeCountdown,
            leftTime: diffSec,
            isTurbo: this.props.gameType === GAME_TYPE.TURBO,
          },
        });
      }
    } else {
      this.modalOpened = false;
      if (this.props.placebetDisabled) {
        this.props.disablePlacebet({ placebetDisabled: false });
      }
    }

    if (diffSec > 0) {
      this.zeroOrLessCount = 0;
    } else {
      this.zeroOrLessCount += 1;
      if (this.zeroOrLessCount === 3) {
        if (this.props.gameType === GAME_TYPE.CLASSIC) {
          this.props.getRound();
        } else {
          this.props.getTurboRound();
        }
      }
    }

    this.setState({ time: getTimeFormat(diffSec) });
  }

  /**
   * Clear timer
   */
  clear = () => {
    if (this.state.time) {
      this.setState({
        time: '',
      });
    }
  }

  /**
   * Call tickets if user is on bet history page,
   * handle showing live in bottom menu
   *
   * @function
   * @returns {void}
   */
  liveFinished = () => {
    const checkLivePage = isLivePage(this.props.currentPage);
    this.props.liveFinished({ gameType: this.props.gameType, extraDuration: checkLivePage });
    if (checkLivePage) {
      this.props.openModal({
        modal: Constants.MODALS.LIVE_FINISH,
        props: {
          round: this.props.selectedLeague.week,
          liveRound: this.props.selectedLeague.liveWeek,
          parentProps: this.props,
        },
      });
    }
    if ((this.props.currentPage === Constants.PAGES.TICKETS
      || this.props.currentPage === Constants.PAGES.TICKET_DETAILS)
      && (this.props.hasPendingTickets === true)) {
      this.props.getTickets(true);
    }
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div
        className={`l-bar__item ${!this.props.isLeagueSelectionOpen && 'collapsed'}`}
        data-toggle="collapse"
        data-target="#league__dd"
        role="button"
        onClick={this.props.toggleLeagueSelectionModal}
      >
        {this.props.selectedLeague && (
          <div className="l-bar__item-league">
            <span className={`l-bar__item-league-icon ${this.props.selectedLeague.flag}${this.props.gameType === GAME_TYPE.TURBO ? '-turbo' : ''}_flag`} />
            <div className="l-bar__item-league-time">
              <h3>{this.state.time}</h3>
            </div>
            <SVGComponent
              className="l-bar__item-league-img icon-m"
              src={`${SVG_ICONS.utility}#icon__arrow-down`}
            />

          </div>
        )}
        <div className="l-bar__item-league-info d-flex">
          <span className="l-bar__item-league-week">
            Week
            {' '}
            {this.props.selectedLeague.week}
          </span>
        </div>
      </div>
    );
  }
}