/**
* @module MarketsHeader
*/
import React, { Component } from 'react';
import SVGComponent from './SVG/SVGComponent';
import { removeListener } from '../utils/common';
import Constants, { SVG_ICONS } from '../constants';
/**
* @typedef {object} props
* @property {object} selectedLeague
* @property {Array} markets
* @property {number} selectedSubselection
* @property {object} selectedMarket
* @property {boolean} isCorrectScoreSelected
* @property {Function} setSelectedMarket
* @property {Function} setSelectedSubselection
*/
export default class MarketsHeader extends Component {
constructor() {
super();
/**
* @member {object}
* @property {Array} showedMarket Contain 4 showed martets of list of the all markets
* @property {Array} dropdownList Contain the rest of the markets
* that are not showed currently
* @property {number} activeTab Is index of selected market in showed market array
* @property {boolean} isDropDownOpen Indicate is dropdown of not showed markets open
* @property {boolean} isInfoOpen Indicate is information about selected market is open
*/
this.state = {
showedMarket: [],
dropdownList: [],
activeTab: 0,
isDropDownOpen: false,
isInfoOpen: false,
};
}
/**
* Setup state of component
*
* @returns {void}
*/
componentDidMount() {
this.initMarkets();
}
/**
* When league is changed setup component
*
* @param {object} prevProps
* @returns {void}
*/
componentDidUpdate(prevProps) {
if (this.props?.markets?.toString() !== prevProps.markets.toString()
|| this.props.gameType !== prevProps.gameType
|| prevProps.selectedLeague.id !== this.props.selectedLeague.id) {
this.initMarkets();
}
}
/**
* Fill dropdownList array with the rest of the markets that are not in showedMarkets
*
* @function
* @param {Array} showedMarket
* @returns {Array} Array of markets showen in dropdown
*/
setDropDownList = (showedMarket) => {
const dropdownList = [];
if (this.props.markets) {
this.props.markets.map((market) => {
if (showedMarket.findIndex((m) => m.id === market.id) === -1) {
dropdownList.push(market);
}
});
}
return dropdownList;
}
/**
* Change selected market and refill dropdownList and showedMarkets arrays
*
* @function
* @param {Event} e Its event with id of selected market
* @returns {void}
*/
selectMarket = (e) => {
const showedMarket = this.state.showedMarket;
const id = parseInt(e.target.id);
showedMarket[3] = this.props.markets.find((m) => m.id === id);
this.setState({
activeTab: 3,
showedMarket,
dropdownList: this.setDropDownList(showedMarket),
isDropDownOpen: false,
isInfoOpen: false,
});
this.props.setSelectedMarket({ market: showedMarket[3] });
}
/**
* Put first 4 markets in showedMarket and the rest in dropdownList array
*
* @function
* @returns {void}
*/
initMarkets = () => {
const markets = [];
markets.push(this.props.markets[0]);
markets.push(this.props.markets[1]);
markets.push(this.props.markets[2]);
markets.push(this.props.markets[3]);
this.setState({
activeTab: 0,
showedMarket: markets,
dropdownList: this.setDropDownList(markets),
});
}
/**
* Change active market
*
* @function
* @param {number} index
* @returns {void}
*/
changeTab = (index) => {
if (index !== this.state.activeTab) {
this.setState({
activeTab: index,
isInfoOpen: false,
isDropDownOpen: false,
});
this.props.setSelectedMarket({ market: this.state.showedMarket[index] });
removeListener();
}
}
/**
* Toggle information view
*
* @function
* @returns {void}
*/
toggleInfo = () => {
this.setState({ isInfoOpen: !this.state.isInfoOpen });
}
/**
* Toggle dropdown of hidden markets
*
* @function
* @returns {void}
*/
toggleDropDown = () => {
this.setState({
isDropDownOpen: !this.state.isDropDownOpen,
});
}
/**
* Change selected subselection index
*
* @function
* @param {number} index
* @returns {void}
*/
changeSubselection = (index) => {
this.props.setSelectedSubselection({
selectedSubselection: index,
submarkets: this.state.showedMarket[this.state.activeTab].submarkets,
});
}
/**
* Render selection view
*
* @function
* @param {object} selectedMarket
* @returns {view}
*/
renderSelections = (selectedMarket) => {
const selections = selectedMarket.submarkets
? selectedMarket.submarkets[this.props.selectedSubselection].selections
: selectedMarket.selections;
return (
Object.keys(selections).map((key) => (
<div className="m-subnav__right-txt" key={key}>
{selections[key].name}
</div>
)));
}
/**
* Format subselection name
*
* @function
* @param {object} market
* @param {string} name
* @returns {string}
*/
handleSubselectionName = (market, name) => {
if (market.id === Constants.MARKET_IDS.MARKET_1X2_OVER_UNDER
|| market.id === Constants.MARKET_IDS.MARKET_DC_OVER_UNDER) {
const elems = name.split(' ');
return elems[elems.length - 1];
}
return name;
}
/**
* Render info header
*
* @function
* @param {object} selectedMarket
* @returns {view}
*/
renderInfoHeader = (selectedMarket) => {
if (selectedMarket.id === Constants.MARKET_IDS.MARKET_MULTIGOAL) {
return (
<div className="m-subnav">
<div className="m-subnav__left">
<SVGComponent
className="icon-m"
onClick={this.toggleInfo}
src={`${SVG_ICONS.utility}#icon__info`}
/>
</div>
</div>
);
}
if (selectedMarket.id === Constants.MARKET_IDS.MARKET_1X2_OVER_UNDER) {
return (
<div className="m-subnav">
<div className="m-subnav__left">
<SVGComponent
className="icon-m"
onClick={this.toggleInfo}
src={`${SVG_ICONS.utility}#icon__info`}
/>
</div>
<div className="m-subnav__right">
<div className="m-subnav__right-txt">1</div>
<div className="m-subnav__right-txt">X</div>
<div className="m-subnav__right-txt">2</div>
</div>
</div>
);
}
if (selectedMarket.id === Constants.MARKET_IDS.MARKET_DC_OVER_UNDER) {
return (
<div className="m-subnav">
<div className="m-subnav__left">
<SVGComponent
className="icon-m"
onClick={this.toggleInfo}
src={`${SVG_ICONS.utility}#icon__info`}
/>
</div>
<div className="m-subnav__right">
<div className="m-subnav__right-txt">1X</div>
<div className="m-subnav__right-txt">12</div>
<div className="m-subnav__right-txt">X2</div>
</div>
</div>
);
}
return (
<div className="m-subnav">
<div
className={`${!this.props.isCorrectScoreSelected ? 'm-subnav__left' : 'm-subnav__icon'}`}
data-toggle="collapse"
href="#m-subnav__info"
role="button"
>
<SVGComponent
className="icon-m"
onClick={this.toggleInfo}
src={`${SVG_ICONS.utility}#icon__info`}
/>
</div>
{!this.props.isCorrectScoreSelected
? (
<div className="m-subnav__right">
{this.state.showedMarket[this.state.activeTab]
&& this.renderSelections(this.state.showedMarket[this.state.activeTab])}
</div>
)
: (
<div className="m-subnav__list">
<div className="m-subnav__odd-name">Home</div>
<div className="m-subnav__odd-name">Draw</div>
<div className="m-subnav__odd-name">Away</div>
</div>
)}
</div>
);
}
/**
* Render
*
* @returns {view}
*/
render() {
const selectedMarket = this.props.selectedMarket;
if (selectedMarket.id === Constants.MARKET_IDS.MARKET_1X2_OVER_UNDER) {
selectedMarket.submarkets = selectedMarket.submarkets.sort((a, b) => {
if (a.name > b.name) {
return 1;
}
return -1;
});
}
return (
<>
<div className="m-nav">
<div className="m-nav__list">
{this.state.showedMarket.map((market, index) => (
market && (
<div
id={`market${market.name}`}
key={market.id}
className={`m-nav__item ${this.state.activeTab === index ? 'm-nav__item--active' : ''}`}
onClick={this.changeTab.bind(this, index)}
>
{market.name}
</div>
)
))}
<div
className={`m-nav__toggle ${!this.state.isDropDownOpen ? 'collapsed' : ''}`}
id="marketDropdownBtn"
data-toggle="collapse"
href="#m-nav__dd"
role="button"
onClick={this.toggleDropDown}
>
<SVGComponent
className="icon-m"
src={`${SVG_ICONS.utility}#icon__arrow-down`}
/>
</div>
</div>
<div className={`m-nav__dd collapse ${this.state.isDropDownOpen ? 'show' : ''}`}>
{this.state.dropdownList.map((market) => (
<div className="m-nav__dd-item" key={market.id} id={market.id} onClick={this.selectMarket}>
{market.name}
</div>
))}
</div>
</div>
{
selectedMarket && selectedMarket.submarkets && (
<div className="p-nav">
{selectedMarket.submarkets.map((subselection, index) => (
subselection.enabled
? (
<div
key={subselection.name}
className={`p-nav__item ${this.props.selectedSubselection === index ? 'p-nav__item--active' : ''}`}
id={`subMarket${subselection.name}`}
onClick={this.changeSubselection.bind(this, index)}
>
{this.handleSubselectionName(selectedMarket, subselection.name)}
</div>
)
: null
))}
</div>
)
}
{this.renderInfoHeader(selectedMarket)}
<div className={`m-subnav__info collapse ${this.state.isInfoOpen ? 'show' : ''}`} id="m-subnav__info">
<p>{selectedMarket && selectedMarket.info}</p>
</div>
</>
);
}
}