import React from "react";
import Helper from "../components/Helper/Helper";
import Sport from '../components/Sport/Sport';
import SportHorizontal from '../components/Sport/SportHorizontal';
const redoslijedTracker = [];
let utakmicaTracker = {};
class App extends React.Component {
  constructor() {
    super();
    let screen = window.location.search.match(/\?e=(\d)+/) || [0, 1];
    this.state = {
      sportConfig: [
        {
          sportID: 1,
          naziv: "football",
          // brojPerioda: "nema"
          redoslijed: 1,
          horizontal: true
        },
        {
          sportID: 5,
          naziv: "tennis",
          // brojPerioda: 5,
          redoslijed: 2,
          horizontal: false
        },
        {
          sportID: 2,
          naziv: "basketball",
          // brojPerioda: 4,
          redoslijed: 3,
          horizontal: false
        },
        {
          sportID: 23,
          naziv: "volleyball",
          // brojPerioda: 5,
          redoslijed: 4,
          horizontal: false
        },
        {
          sportID: 34,
          naziv: "beachVolleyball",
          // brojPerioda: ,
          redoslijed: 5,
          horizontal: false
        },
        {
          sportID: 4,
          naziv: "hockey",
          // brojPerioda: 3,
          redoslijed: 6,
          horizontal: false
        },
        {
          sportID: 6,
          naziv: "handball",
          // brojPerioda: nema,
          redoslijed: 7,
          horizontal: true
        }
      ],
      okladeConfig: [
        // nogomet (ID: 1)
        {
          tekst: "Regularno vrijeme",
          sifra: 1,
          tipovi: ["1", "X", "2"],
          // config -> x=kvota (obična vrijednost), z=žuta (specijalna vrijednost), r=rezultat, n=nema kvote
          config: [["x", "x", "x"], ["x", "x", "x"]],
          sport: 1
        },
        {
          tekst: "Pobjednik ostatka",
          sifra: 2,
          tipovi: ["", "1", "X", "2"],
          config: [["r", "x", "x", "x"], ["r", "x", "x", "x"]],
          sport: 1
        },
        {
          tekst: "Sljedeći gol",
          sifra: 3,
          tipovi: ["1", "X", "2"],
          config: [["x", "x", "x"], ["x", "x", "x"]],
          sport: 1
        },
        {
          tekst: "Zbroj golova",
          sifra: 4,
          tipovi: ["", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 1
        },
        {
          tekst: "Oba daju gol",
          sifra: 5,
          tipovi: ["", "Da", "Ne"],
          config: [["n", "x", "x"], ["n", "x", "x"]],
          sport: 1
        },
        // tenis (ID: 5)
        {
          tekst: "Pobjednik",
          sifra: 1,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$", "", ""], ["1$", "", ""]],
          sport: 5
        },
        {
          tekst: "Pobjednik game, game-set",
          sifra: 2,
          tipovi: ["g,g-s", "1", "X", "2"],
          config: [["z", "x", "x", "x"], ["z", "x", "x", "x"]], //8,9g-2s
          jezik: [["2$,3$g-1$s", "", "", ""], ["2$,3$g-1$s", "", "", ""]],
          sport: 5
        },
        {
          tekst: "Pobjednik gem-set",
          sifra: 3,
          tipovi: ["g-s", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$g-2$s", "", ""], ["1$g-2$s", "", ""]],
          sport: 5
        },
        {
          tekst: "Zbroj gemova seta",
          sifra: 4,
          tipovi: ["zg - s", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$g-2$s", "", ""], ["1$g-2$s", "", ""]],
          sport: 5
        },
        {
          tekst: "Zbroj gemova meča",
          sifra: 5,
          tipovi: ["", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["", "", ""], ["", "", ""]],
          sport: 5
        },
        // košarka (ID: 2)
        {
          tekst: "Pobjednik",
          sifra: 1,
          tipovi: ["1", "X", "2"],
          config: [["x", "x", "x"], ["x", "z", "x"], ["x", "z", "x"]], // košarka u 1. četvrtini ima još jedan dodatni red kvota
          jezik: [["1$", "", ""], ["1$", "1$/4", "1$"], ["1$", "1$.pol", "1$"]],

          sport: 2
        },
        {
          tekst: "Tko 1. postiže koševa u meču",
          sifra: 2,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$", "1$", "1$"], ["1$", "1$", "1$"], ["1$", "1$", "1$"]],
          sport: 2
        },
        {
          tekst: "Hendikep",
          sifra: 3,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"], ["z", "x", "x"]],
          jezik: [
            ["1$m", "", ""],
            ["1$ 2$/4", "1$", "1$"],
            ["1$ 2$p", "1$", "1$"]
          ],

          sport: 2
        },
        {
          tekst: "Zbroj koševa",
          sifra: 4,
          tipovi: ["", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$m", "", ""], ["1$ 2$/4", "", ""], ["1$ 2$p", "", "", ""]],
          sport: 2
        },
        {
          tekst: "Dom/Gost-Koševa",
          sifra: 5,
          tipovi: ["", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$", "1$", "1$"], ["1$", "1$", "1$"], ["1$", "1$", "1$"]],
          sport: 2
        },
        // odbojka (ID: 23)
        {
          tekst: "Pobjednik",
          sifra: 1,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$", "1$", "1$"], ["1$", "1$", "1$"]],
          sport: 23
        },
        {
          tekst: "Hendikep meč-set",
          sifra: 2,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$", "", ""], ["1$ 2$s", "", ""]],

          sport: 23
        },
        {
          tekst: "Broj setova u meču",
          sifra: 3,
          tipovi: ["3", "4", "5"],
          config: [["x", "x", "x"], ["x", "x", "x"]],
          sport: 23
        },
        {
          tekst: "Zbroj poena meča",
          sifra: 4,
          tipovi: ["", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 23
        },
        {
          tekst: "Zbroj poena seta",
          sifra: 5,
          tipovi: ["", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$ 2$s", "", ""], ["1$ 2$s", "", ""]],

          sport: 23
        },
        // hokej (ID: 4)
        {
          tekst: "Regularno vrijeme",
          sifra: 1,
          tipovi: ["1", "X", "2"],
          config: [["x", "x", "x"], ["x", "x", "x"]],
          jezik: [["1$ 2$/3", "", ""], ["1$ 2$/3", "", ""]],

          sport: 4
        },
        {
          tekst: "Domaćin/Gost (broj golova)",
          sifra: 2,
          tipovi: ["0", "1", "2", "3+"],
          config: [["x", "x", "x", "x"], ["x", "x", "x", "x"]],
          jezik: [["1$ 2$/3", "", ""], ["1$ 2$/3", "", ""]],

          sport: 4
        },
        {
          tekst: "Zbroj golova trećine",
          sifra: 3,
          tipovi: ["zg-t", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$ 2$/3", "1$", "1$"], ["1$ 2$/3", "1$", "1$"]],
          sport: 4
        },
        {
          tekst: "Zbroj golova meča",
          sifra: 4,
          tipovi: ["", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          jezik: [["1$ 2$/3", "", ""], ["1$ 2$/3", "", ""]],

          sport: 4
        },
        {
          tekst: "Sljedeći gol",
          sifra: 5,
          tipovi: ["1", "X", "2"],
          config: [["x", "x", "x"], ["x", "x", "x"]],
          jezik: [["1$ 2$/3", "", ""], ["1$ 2$/3", "", ""]],

          sport: 4
        },
        // rukomet (ID: 6)
        {
          tekst: "Regularno vrijeme",
          sifra: 1,
          tipovi: ["1", "X", "2"],
          config: [["x", "x", "x"], ["x", "x", "x"]],
          sport: 6
        },
        {
          tekst: "Hendikep meča-poluvrijeme",
          sifra: 2,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 6
        },
        {
          tekst: "Tko 1. postiže gol meča",
          sifra: 3,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 6
        },
        {
          tekst: "Zbroj golova meča",
          sifra: 4,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 6
        },
        {
          tekst: "Zbroj golova 1. pol",
          sifra: 5,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 6
        },
        // odbojka na pijesku (ID: 34)
        {
          tekst: "Pobjednik",
          sifra: 1,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 34
        },
        {
          tekst: "Tko prije postiže poen seta",
          sifra: 2,
          tipovi: ["p - s", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 34
        },
        {
          tekst: "Hendikep meč-set",
          sifra: 3,
          tipovi: ["", "1", "2"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 34
        },
        {
          tekst: "Zbroj poena meč-set",
          sifra: 4,
          tipovi: ["", "Manje", "Više"],
          config: [["z", "x", "x"], ["z", "x", "x"]],
          sport: 34
        },
        {
          tekst: "Broj setova",
          sifra: 5,
          tipovi: ["2s", "3s"],
          config: [["x", "x"], ["x", "x"]],
          sport: 34
        }
      ],

      // headers data
      codeTxt: "Šifra",
      firstHalfFootballText: "1. Poluvrijeme",
      firstHalfHandbalText: "1. pol",

      Ok_D: 0,
      Ok_t: 0,
      Ut_D: 0,
      Ut_T: 0,
      // ekran: 1,
      ekran: screen[1],
      j: "hr",
      k: 0,
      UtakmiceT: {},
      OkladeT: {},
      Koeficijenti: {},
      finalOklade: {},
      utakmice: {},
      oklade: {},
      koeficijenti: {}
    };
    this.mergeData = this.mergeData.bind(this);
    this.newMergeData = this.newMergeData.bind(this);
    this.fetchData = this.fetchData.bind(this);
    this.getId = this.getId.bind(this);

    this.id = 1;
    window.jezik = this.state.j;
    window.Helper = Helper;
  }

  componentDidMount() {
    setInterval(this.fetchData, 2000);
  }

  getId() {
    if (this.id % 100 === 0) {
      this.setState({
        Ok_D: 0,
        Ok_t: 0,
        Ut_D: 0,
        Ut_T: 0,
        k: 0
      });
    }
    return this.id++;
  }
  getUrl(id) {
    const array = [
      "https://test.wwin.ba:8102/TVDataService/GetActiveGames",
      "https://test.wwin.ba:8102/TVDataService/GetData"
    ];
    return array[1];
  }
  fetchData() {
    fetch(this.getUrl(this.getId()), {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        Ok_D: this.state.Ok_D,
        Ok_t: this.state.Ok_t,
        Ut_D: this.state.Ut_D,
        Ut_T: this.state.Ut_T,
        ekran: this.state.ekran,
        j: this.state.j,
        k: 0 //this.state.k
      })
    })
      .then(res => res.json())
      .then(data => {
        data = data[Object.keys(data)[0]];
        this.mergeData(data, {
          Ok_D:  this.state.Ok_D,
          Ok_t:  this.state.Ok_t,
          Ut_D:  this.state.Ut_D,
          Ut_T:  this.state.Ut_T,
          k:  this.state.k
        });
      });
  }
  newMergeData(newData, misc) {
    let state = this.state;
    let oldObj = {
      utakmice: state.utakmice,
      oklade: state.oklade,
      koeficijenti: state.koeficijenti,
      vrstaoklade: state.vrstaoklade
    };

    let newState = Helper.newMergeData({ ...state, ...oldObj }, newData);
    this.setState({ ...newState, ...misc });
    // Brisemo stare utakmice koje su zavrsile
    const newUtakmiceKeys = Object.keys(newState.utakmice).map(x => Number(x));
    redoslijedTracker.forEach(key => {
      if (!newUtakmiceKeys.includes(key)) {
        console.log("Key not found", newUtakmiceKeys, key, redoslijedTracker);
        delete utakmicaTracker[key];
        redoslijedTracker.splice(redoslijedTracker.indexOf(key), 1);
      }
      return true;
    });

    // sortiramo nove utakmice po TVSifra
    const sortiraneUtakmice = Object.values(newState.utakmice).sort((x, y) => {
      if (utakmicaTracker[x.IDUtakmica] && utakmicaTracker[y.IDUtakmica]) {
        return (
          redoslijedTracker.indexOf(x.IDUtakmica) -
          redoslijedTracker.indexOf(y.IDUtakmica)
        );
      } else if (
        utakmicaTracker[x.IDUtakmica] &&
        !utakmicaTracker[y.IDUtakmica]
      ) {
        return 1;
      } else if (
        !utakmicaTracker[x.IDUtakmica] &&
        utakmicaTracker[y.IDUtakmica]
      ) {
        return -1;
      } else {
        return Number(x.TVSifra) - Number(y.TVSifra);
      }
    });
    console.log("sortiraneUtakmice", sortiraneUtakmice);
    // IDUtakmica
    const utakmicaKeys = sortiraneUtakmice.map(utk => utk.IDUtakmica);
     redoslijedTracker.filter(key => utakmicaKeys.includes(key));

    // Doodajemo utakmica u tacker
    utakmicaKeys.forEach(IDUtakmica => {
      if (!redoslijedTracker.includes(IDUtakmica)) {
        redoslijedTracker.push(IDUtakmica);
      }
      if (!utakmicaTracker[IDUtakmica]) {
        utakmicaTracker = Object.fromEntries([...Object.entries([IDUtakmica]), [IDUtakmica, newState.utakmice[IDUtakmica]]]);
      }
    });
    console.log("Utakmica Tracker", utakmicaTracker);
    console.log("Redoslijed Tracker", redoslijedTracker);
    let newTracker = {}
    redoslijedTracker.forEach(key => {
      newTracker[key] = utakmicaTracker[key];
    })
    console.log("RAzlika", redoslijedTracker, newTracker, utakmicaTracker)

    newState.utakmice = utakmicaTracker = newTracker;
    this.setState({ ...newState, ...misc });
    return newState;
  }

  mergeData(newData, misc) {
    let state = this.state;
    // console.log("newData.UtakmiceT",newData.UtakmiceT);
    //  let tempData = [...newData.UtakmiceT];
    //  let myData = tempData.sort((i,j) => {if(parseInt(i.TVSifra, 10) > parseInt(j.TVSifra, 10)) return 1; else return -1;});
    //  newData.UtakmiceT = myData;
    //  console.log("newData.UtakmiceT", newData.UtakmiceT);


    let Koeficijenti = Helper.newCombineTwoKoeficijenta(
      Object.values(state.Koeficijenti),
      newData.Koeficijenti || [],
      "OkladaID",
      "IDKoeficijent"
    );

    this.newMergeData({ ...newData, K: Koeficijenti }, misc);
  }

  render() {
    window.Helper = Helper;
    window.Jezik = this.state.j;
    const utakmice = Object.values(this.state.utakmice);

    let listSports = this.state.sportConfig
      .map((tmpSport) => {
        let tmpListaUtakmica = utakmice
          .filter(utk => utk.SportID === tmpSport.sportID)
          .map(utk =>
            Helper.mapOldToNewObject(utk, this.state.finalOklade[utk.IDUtakmica])
          );

        return tmpSport.horizontal ?
          <SportHorizontal key={tmpSport.sportID}
            sportID={tmpSport.sportID}
            data={tmpListaUtakmica}
            codeTxt={this.state.codeTxt}
            firstHalfFootballText={this.state.firstHalfFootballText}
            firstHalfHandbalText={this.state.firstHalfHandbalText}
            sportConfig={this.state.sportConfig}
            betsConfig={this.state.okladeConfig}
          /> :
          <Sport key={tmpSport.sportID}
            sportID={tmpSport.sportID}
            data={tmpListaUtakmica}
            codeTxt={this.state.codeTxt}
            sportConfig={this.state.sportConfig}
            betsConfig={this.state.okladeConfig}
          />
      })

    return (
      <React.Fragment>
        {listSports}
      </React.Fragment>
    );
  }
}

export default App;