import React from "react";
import "./DetailsQuotasDiv.css";
import QuotasDisplay from "./QuotasDisplay/QuotasDisplay";

const detailsQuotasDiv = props => {
  let counter = 1;
  let oklade = window.Helper.rasclaniObjekatOklada(props.matchData.quotas, 2);
  let klase = window.Helper.rasclaniObjekatOklada(props.matchData.quotas, 1);

  // if sports is equal football and period is second half removes bottom row;
  if (props.matchData.sport === "football" && props.oldObj.TrenutniStatusUtakmiceID > 2) {
    Object.keys(oklade).forEach(key => {
      let okl = oklade[key];
      delete okl[2];
      oklade[key] = okl;
    });
  }
  let bets = props.betsConfig.map((betConfig, index) => {
    if (betConfig.sport !== props.sportConfig) return null;
    return (
      <QuotasDisplay
        betsConfig={props.betsConfig[index]}
        matchData={oklade[counter]}
        klase={klase[counter++]}
        key={`${props.parentKey}${index}`}
        parentKey={`${props.parentKey}${index}`}
      />
    );
  });

  return <div className="DetailsQuotasDiv">{bets}</div>;
};

export default detailsQuotasDiv;