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);
    }
  }

  /**
   * 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-responsive">
            <table className="table-style table-s table-result nbb">
              <thead>
                <tr>
                  {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;
                    return (
                      <th key={league.name}>
                        <div>{league.name}</div>
                        {this.props.isShop && (
                          <>
                            <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 result-row${expandedRows[`row-${i}`] ? ' open' : ''}`}
                    key={i}
                    onClick={() => this.toggleRow(`row-${i}`)}
                  >
                    {this.props.selectedRound.leagues.map((l) => (
                      <td key={l.id}>
                        {match[l.id] && (
                          <div className="result-content">
                            <div className="d-flex result-score-row">
                              <div className="text-right">{match[l.id].homeTeam}</div>
                              <div className="text-center score">{match[l.id].result || '-:-'}</div>
                              <div className="text-left">
                                <span>{match[l.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[l.id].timeline)}
                          </div>
                        )}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </Section>
    );
  }
}