components/MenuItems/Round/RoundResults.js

import React, { Component } from 'react';
import Section from '../../Section';
import { scrollTo } from '../../../utils/common';
import { EXTRA_BETS_MARKET_IDS, MARKETS_ROUND_SPECIAL_IDS } from '../../../constants';

/**
 * @module MI-RoundDetails/RoundResults
 */
const elementId = 'round-details';

/**
 * @typedef {object} props
 * @property {Array} selectedRound Selected round data
 */
export default class RoundResults extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expandedRows: {},
    };
  }

  /**
   * Scroll to round details view
   *
   * @returns {void}
   */
  componentDidMount() {
    scrollTo(elementId);
  }

  /**
   * Scroll to round details view
   *
   * @param {object} nextProps
   * @returns {void}
   */
  // eslint-disable-next-line react/no-deprecated
  componentWillUpdate(nextProps) {
    if (nextProps.selectedRound.roundId !== this.props.selectedRound.roundId) {
      scrollTo(elementId);
    }
  }

  componentDidUpdate(prevProps) {
    if (prevProps.selectedRound.roundId !== this.props.selectedRound.roundId) {
      this.setState({ expandedRows: {} });
    }
  }

  /**
   * Toggle row expansion
   *
   * @param {string} rowKey
   * @returns {void}
   */
  toggleRow = (rowKey) => {
    this.setState((prevState) => ({
      expandedRows: {
        ...prevState.expandedRows,
        [rowKey]: !prevState.expandedRows[rowKey],
      },
    }));
  };

  /**
   * Render timeline for a match
   *
   * @param {Array} timeline
   * @returns {JSX.Element}
   */
  renderTimeline = (timeline) => {
    if (!timeline || timeline.length === 0) return null;

    return (
      <div className="match-timeline">
        {timeline.map((event, idx) => (
          // eslint-disable-next-line react/no-array-index-key
          <div className="timeline-row" key={idx}>
            <div className={`timeline-home${event.homeHas1up ? ' has-1up' : ''}`}>
              {event.homeHas1up && <span className="icon-1up" />}
              {event.homeScore}
            </div>
            <div className="timeline-time">{event.minute}</div>
            <div className={`timeline-away${event.awayHas1up ? ' has-1up' : ''}`}>
              {event.awayScore}
              {event.awayHas1up && <span className="icon-1up" />}
            </div>
          </div>
        ))}
      </div>
    );
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    const { expandedRows } = this.state;

    return (
      <Section className="mt-20" heading={`Results Round #${this.props.selectedRound.roundId}`}>
        <div className="table-wrapper mt-20" id={elementId}>
          <div className="table-flex-wrapper">
            {this.props.selectedRound.leagues.map((league) => {
              const totalGoals = league?.roundSpecialResults[MARKETS_ROUND_SPECIAL_IDS.GOALS];
              const totalDraws = league?.roundSpecialResults[MARKETS_ROUND_SPECIAL_IDS.DRAWS];
              const ggIce = league?.goalGaloreResults[EXTRA_BETS_MARKET_IDS.ICE];
              const ggFire = league?.goalGaloreResults[EXTRA_BETS_MARKET_IDS.FIRE];
              const ggMD = league?.goalGaloreResults[EXTRA_BETS_MARKET_IDS.MEGADRAW];
              const ggAllZero = parseInt(ggIce, 10) === 0 && parseInt(ggFire, 10) === 0;
              const hasRoundSpecialResults = totalGoals || totalDraws;

              return (
                <div className="table-responsive" key={league.name}>
                  <table className="table-style table-s table-result nbb">
                    <thead>
                      <tr>
                        <th>
                          <div>{league.name}</div>
                          {this.props.isShop && hasRoundSpecialResults && (
                            <>
                              <div className="mt-2">
                                Total Goals: {totalGoals} | Total Draws: {totalDraws}
                              </div>
                              <div className="mt-2">
                                {ggAllZero && ' Goal Galore: 0X'}
                                {ggIce && parseInt(ggIce, 10) !== 0 && ` Goal Galore Ice: ${ggIce}X`}
                                {ggFire && parseInt(ggFire, 10) !== 0 && ` Goal Galore Fire: ${ggFire}X`}{' '}
                              </div>
                              <div className="mt-2">
                                {ggMD && parseInt(ggMD, 10) !== 0 && ` MegaDraw: ${ggMD}X`}
                                {ggMD && parseInt(ggMD, 10) === 0 && ` MegaDraw: 0X`}
                              </div>
                            </>
                          )}
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {this.props.selectedRound.matches.map((match, i) => (
                        // eslint-disable-next-line react/no-array-index-key
                        <tr
                          className={`table-style-row${
                            this.props.isShop
                              ? ` result-row${expandedRows[`row-${i}-league${league.id}`] ? ' open' : ''}`
                              : ''
                          }`}
                          key={i}
                          onClick={this.props.isShop ? () => this.toggleRow(`row-${i}-league${league.id}`) : undefined}
                        >
                          <td key={league.id}>
                            {match[league.id] &&
                              (this.props.isShop ? (
                                <div className="result-content">
                                  <div className="d-flex result-score-row">
                                    <div className="text-right">{match[league.id].homeTeam}</div>
                                    <div className="text-center score">{match[league.id].result || '-:-'}</div>
                                    <div className="text-left">
                                      <span>{match[league.id].awayTeam}</span>
                                      <div className="result-toggle">
                                        <svg
                                          width="12"
                                          height="8"
                                          viewBox="0 0 12 8"
                                          fill="none"
                                          xmlns="http://www.w3.org/2000/svg"
                                        >
                                          <path
                                            d="M1 1L6 6L11 1"
                                            stroke="currentColor"
                                            strokeWidth="2"
                                            strokeLinecap="round"
                                          />
                                        </svg>
                                      </div>
                                    </div>
                                  </div>
                                  {this.renderTimeline(match[league.id].timeline)}
                                </div>
                              ) : (
                                <div className="d-flex table-style-row-result">
                                  <div className="text-right">{match[league.id].homeTeam}</div>
                                  <div className="text-center score">{match[league.id].result || '-:-'}</div>
                                  <div className="text-left">{match[league.id].awayTeam}</div>
                                </div>
                              ))}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              );
            })}
          </div>
        </div>
      </Section>
    );
  }
}