import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ToastController,ToastOptions } from 'ionic-angular';
import { NetworkEngineProvider } from "../../providers/network-engine//network-engine";
import { MenuPage } from '../menu/menu';

/**
 * Generated class for the TestPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage {

  toastOptions: ToastOptions;
  i=0;
  nrPytania=1;
  toAdd=document.createDocumentFragment();

  newQest=document.createElement("span");
  newAns1=document.createElement("span");
  newAns2=document.createElement("span");
  newAns3=document.createElement("span");

  constructor(public navCtrl: NavController, public navParams: NavParams,public network: NetworkEngineProvider,private toast: ToastController) {
    this.toastOptions = {
      message: 'Koniec testu. Kliknij w "Sprawdź wyniki" by dowiedzieć się jak Ci poszło.',
      duration:5000,
      position:"bottom"
    }
  }

  ionViewDidLoad() {
    //on start

    var odp1;
    var odp2;
    var odp3;

    var increment;
    let p = this.network.callAnswear();

    increment = this.i

    p.then(data=>{
      try{
      let pytanie = data.json()[increment].TrescPytania;

      odp1 = data.json()[increment].Odp1;
      this.newAns1.innerHTML="<span>"+odp1+"</span>";
      this.toAdd.appendChild(this.newAns1);
      document.getElementById('odp1').appendChild(this.toAdd);

      odp2 = data.json()[increment].Odp2;
      this.newAns2.innerHTML="<span>"+odp2+"</span>";
      this.toAdd.appendChild(this.newAns2);
      document.getElementById('odp2').appendChild(this.toAdd);

      odp3 = data.json()[increment].Odp3;
      this.newAns3.innerHTML="<span>"+odp3+"</span>";
      this.toAdd.appendChild(this.newAns3);
      document.getElementById('odp3').appendChild(this.toAdd);

      this.nrPytania=data.json()[increment].Id;
      this.newQest.innerHTML = "<span>Pytanie nr: <b>"+this.nrPytania+"</b></br>"+pytanie+"</br></span>";
      }catch{
      //1. ukrycie guziora dalej
      //2. dodanie ekranu koniec pytan
      //3. dodanie guziora wroc do menu
      //4. wysylanie odp na serwer
      this.toast.create(this.toastOptions).present();


        this.navCtrl.push(MenuPage);
        console.log("koniec pytan");

      }
    })

    this.toAdd.appendChild(this.newQest);
    document.getElementById('pytanie').appendChild(this.toAdd);
  }

  callAnswearService(odpowiedz){
    var x = this.i;
    try{
    console.log("Wartość inkrementatora: "+x);
    let p = this.network.callAnswear();

    p.then(data=>{
      console.log("ID pytania: "+JSON.stringify(data.json()[x].Id));

      if(odpowiedz==data.json()[x].Odpowiedz){
        console.log("odp poprawna");
      }else{
        console.log("odp zla");
      }


    })
    }catch{
      console.log("koniec pytań");

    }

    this.i++;
    this.ionViewDidLoad();

  }

}