///////////////////////////////////////////////////////
//////          PIE CHARTS                ////////////
//Get and draw the pie charts with group size 1 to 5//
//////////////////////////////////////////////////////
//Chart.defaults.global.legend = false;
const ctx1 = document.getElementById('pieChart1').getContext('2d');
const colors = ['#7BB786','#CE5766'];
//old pair of colors: ['#59b300','#c65353']

var pieChart1 = new Chart(ctx1,{
  type:'pie',
  data: {
     labels: ['Probability to win: 100%', 'Probability to lose: 0%'],
     datasets: [
     {
        data: [1, 0],
        backgroundColor: colors,
        borderWidth:1
      }
    ],
    options: {
        rotation: 180
    }
   }
});

const ctx2 = document.getElementById('pieChart2').getContext('2d');
var pieChart2 = new Chart(ctx2,{
  type:'pie',
  data: {
     labels: ['Probability to win: 50%', 'Probability to lose: 50%'],
     datasets: [
     {
        data: [0.5, 0.5],
        backgroundColor: colors,
        borderWidth:1
      }
    ]
   }
});

const ctx3 = document.getElementById('pieChart3').getContext('2d');
var pieChart3 = new Chart(ctx3,{
  type:'pie',
  data: {
     labels: ['Probability to win: 33%', 'Probability to lose: 67%'],
     datasets: [
     {
        data: [0.33, 0.67],
        backgroundColor: colors,
        borderWidth:1
      }
    ],
    options: {
        rotation: 180
    }
   }
});

const ctx4 = document.getElementById('pieChart4').getContext('2d');
var pieChart4 = new Chart(ctx4,{
  type:'pie',
  data: {
     labels: ['Probability to win: 25%', 'Probability to lose: 75%'],
     datasets: [
     {
        data: [0.25, 0.75],
        backgroundColor: colors,
        borderWidth:1
      }
    ],
    options: {
        rotation: 180
    }
   }
});

const ctx5 = document.getElementById('pieChart5').getContext('2d');
var pieChart5 = new Chart(ctx5,{
  type:'pie',
  data: {
     labels: ['Probability to win: 20%', 'Probability to lose: 80%'],
     datasets: [
     {
        data: [0.2, 0.8],
        backgroundColor: colors,
        borderWidth:1
      }
    ],
    options: {
        rotation: 180
    }
   }
});

///////////////////////////////////////////////////////////////
///////// Variables and Arrays Declaration ////////////////////
///////////////////////////////////////////////////////////////

//put all pie charts into an array
let pieCharts = [pieChart1, pieChart2, pieChart3, pieChart4, pieChart5];

//get the inputs
// OLD!! let groupSize = document.querySelector('.groupSize_Input');
let rangeValues = document.querySelectorAll("input[type='range']");

// Since rangeValues includes the actual choices, we have to set the indices to starting from 10
//!!! THIS HAS TO BE CHANGED FOR TREATMENT N=3
let ownEffort = rangeValues[10];
let ownSabotage = rangeValues[11];
let othersEffort = rangeValues[12];
let othersSabotage = rangeValues[13];


//////////////////////////////////////////////////////////////////////////
///////////////////       FUNCTIONS        ///////////////////////////////
//////////////////////////////////////////////////////////////////////////


//check if inputs exceed 200
function checkInputs(e, s){
    if (e+s > 200) {
    alert('The sum of Option A and Option B must not exceed 200!\nYour input has been set to the highest possible value.')
    return false
    }
    else {
    return true
    }
}

//calculate the performances and update the pie chart
function updatePieChart(e, s, e_j, s_j){
    for (n=2; n<6; n++){
        //If all zero, set pie charts to equal probabilities
        if(e == 0 && e_j ==0){
            //Updating the PieCharts Values with the new probabilities as the data
            pieCharts[n-1].data.datasets[0].data[0]=Math.round(1/n*100)/100;
            pieCharts[n-1].data.datasets[0].data[1]=Math.round((n-1)/n*100)/100;
            bonus= externality_effort*(e+ (n-1)*e_j) - externatlity_sabotage*(s+(n-1)*s_j);
            //Updating the PieCharts Labels with the new probabilities
            pieCharts[n-1].data.labels=['Probability to win: '+ Math.round(1/n*100) +'%', 'Probability to lose: '
            + Math.round((n-1)/n*100) + '%']
            //Updating the performance and others performances for display
            //document.getElementById('performance'+n).value=0;
            //document.getElementById('othersPerformance'+n).value=0;
            document.getElementById('bonus'+n).value=Math.round(bonus*10)/10;
        }
        else {
            performance = e/ (1 + (n-1)*s_j);
            othersPerformance = e_j/(1+s+(n-2)*s_j);
            ownProbability = performance/(performance+(n-1)*othersPerformance);
            othersProbability = 1 - ownProbability;
            bonus= externality_effort*(e+ (n-1)*e_j) - externatlity_sabotage*(s+(n-1)*s_j);
            //Updating the PieCharts Values with the new probabilities as the data
            pieCharts[n-1].data.datasets[0].data[0]=Math.round(ownProbability*100)/100;
            pieCharts[n-1].data.datasets[0].data[1]=Math.round(othersProbability*100)/100;
            //Updating the PieCharts Labels with the new probabilities
            pieCharts[n-1].data.labels=['Probability to win: '+ Math.round(ownProbability*100) +'%', 'Probability to lose: '
            + Math.round(othersProbability*100) + '%']
            //Updating the performance and others performances for display
            document.getElementById('bonus'+n).value=Math.round(bonus*10)/10;
        };
        //Update pieChart for group size n=1 since it doesn't get attributed
        document.getElementById('bonus1').value=Math.round((externality_effort*e-externatlity_sabotage*s)*10)/10;
        pieCharts[n-1].update();
    };
}


/////////////////////////////////////////////////////////////////////////////
////////////          EVENT LISTENERS            ////////////////////////////
////////////////////////////////////////////////////////////////////////////



//EventListener every time that something is changed
ownEffort.addEventListener ('click', a => {
    //First we increase the counter for the clicks
    document.querySelector('[name=clicksEffort_calc_belief]').value = parseInt(document.querySelector('[name=clicksEffort_calc_belief]').value) + parseInt(1);
        //alert(document.querySelector('[name=clicksEffort]').value);
    e=Number(a.target.value);
    s=Number(ownSabotage.value);
    e_j=Number(othersEffort.value);
    s_j=Number(othersSabotage.value);
    // check if inputs exceed 200, if true they don't
    if (checkInputs(e, s) == true){
        updatePieChart(e, s, e_j, s_j);
        //document.querySelector('[name=previousEffort]').value = e;
    }
    // if they exceed, set the inputs to the value before for both the slider and the number display
    // UND FUNKTIONIERT NOCH IMMER NICHT!!
    // THIS HAS TO BE CHANGED FOR TREATMENT N=3
    else {
       document.querySelectorAll("input[type='number']")[10].value = 200-s;
       document.querySelectorAll("input[type='range']")[10].value =  200-s;
       updatePieChart(200-s,s,e_j,s_j);
       // HIER NOCH FALLS DER VORHERIGE WERT EINGEGEBEN WERDEN SOLL, BITTE AUCH IM HTML FILE AKTIVIEREN
       //document.querySelectorAll("input[type='number']")[10].value = document.querySelector('[name=previousEffort]').value;
       //document.querySelectorAll("input[type='range']")[10].value = document.querySelector('[name=previousEffort]').value;
    };
    });

ownSabotage.addEventListener ('click', a => {
    document.querySelector('[name=clicksSabotage_calc_belief]').value = parseInt(document.querySelector('[name=clicksSabotage_calc_belief]').value) + parseInt(1);
        //alert(document.querySelector('[name=clicksSabotage]').value);
    e=Number(ownEffort.value);
    s=Number(a.target.value);
    e_j=Number(othersEffort.value);
    s_j=Number(othersSabotage.value);
    if (checkInputs(e, s) == true){
        updatePieChart(e, s, e_j, s_j);
        //document.querySelector('[name=previousSabotage]').value = s;
    }
    else {
        document.querySelectorAll("input[type='number']")[11].value = 200-e;//document.querySelector('[name=previousSabotage]').value;
        document.querySelectorAll("input[type='range']")[11].value = 200-e;//document.querySelector('[name=previousSabotage]').value;
        updatePieChart(e,200-e,e_j,s_j);
    }
    });

othersEffort.addEventListener ('click', a => {
    document.querySelector('[name=clicksOpponentEffort_calc_belief]').value = parseInt(document.querySelector('[name=clicksOpponentEffort_calc_belief]').value) + parseInt(1);
        //alert(document.querySelector('[name=clicksOpponentEffort]').value);
    e=Number(ownEffort.value);
    s=Number(ownSabotage.value);
    e_j=Number(a.target.value);
    s_j=Number(othersSabotage.value);
    if (checkInputs(e_j, s_j) == true){
        updatePieChart(e, s, e_j, s_j);
        //document.querySelector('[name=previousOpponentEffort]').value = e_j;
    }
    else {
        document.querySelectorAll("input[type='number']")[12].value = 200 - s_j; //document.querySelector('[name=previousOpponentEffort]').value;
        document.querySelectorAll("input[type='range']")[12].value = 200 - s_j;  //document.querySelector('[name=previousOpponentEffort]').value;
        updatePieChart(e,s,200-s_j,s_j);
    }
    });

othersSabotage.addEventListener ('click', a => {
    document.querySelector('[name=clicksOpponentSabotage_calc_belief]').value = parseInt(document.querySelector('[name=clicksOpponentSabotage_calc_belief]').value) + parseInt(1);
        // alert(document.querySelector('[name=clicksOpponentSabotage]').value);
    e=Number(ownEffort.value);
    s=Number(ownSabotage.value);
    e_j=Number(othersEffort.value);
    s_j=Number(a.target.value);
    if (checkInputs(e_j, s_j) == true){
        updatePieChart(e, s, e_j, s_j);
        //document.querySelector('[name=previousOpponentSabotage]').value = s_j;
    }
    else {
        document.querySelectorAll("input[type='number']")[13].value = 200-e_j; //document.querySelector('[name=previousOpponentSabotage]').value;
        document.querySelectorAll("input[type='range']")[13].value = 200-e_j;//document.querySelector('[name=previousOpponentSabotage]').value;
        updatePieChart(e,s,e_j,200-e_j);
    }
    });

//since for loop is not working for Event Listeners in Javascript, I individually add all the events for the inputs.
//pair numbers are for effort and impair numbers for sabotage. Firsts, take sabotage from the slider afterwards,
//The latter take effort from the slider before.
//REDUCE THE AMOUNT HERE IN THE N=3 TREATMENT.
//N=1

// HERE WE ARE CHECKING WHETHER THE INPUTS FROM THE ELICITATION IS MORE THAN 200!! If yes, than put the value such
// that together they are 200.


rangeValues[0].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[1].value)) == false){
        document.querySelectorAll("input[type='number']")[0].value=200-rangeValues[1].value;
        document.querySelectorAll("input[type='range']")[0].value=200-rangeValues[1].value;
    }
});
rangeValues[1].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[0].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[1].value=200-rangeValues[0].value;
        document.querySelectorAll("input[type='range']")[1].value=200-rangeValues[0].value;
    }
});
//N=2
rangeValues[2].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[3].value)) == false){
        document.querySelectorAll("input[type='number']")[2].value=200-rangeValues[3].value;
        document.querySelectorAll("input[type='range']")[2].value=200-rangeValues[3].value;
    }
});
rangeValues[3].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[2].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[3].value=200-rangeValues[2].value;
        document.querySelectorAll("input[type='range']")[3].value=200-rangeValues[2].value;
    }
});
//N=3;
rangeValues[4].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[5].value)) == false){
        document.querySelectorAll("input[type='number']")[4].value=200-rangeValues[5].value;
        document.querySelectorAll("input[type='range']")[4].value=200-rangeValues[5].value;
    }
});
rangeValues[5].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[4].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[5].value=200-rangeValues[4].value;
        document.querySelectorAll("input[type='range']")[5].value=200-rangeValues[4].value;
    }
});
//N=4;
rangeValues[6].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[7].value)) == false){
        document.querySelectorAll("input[type='number']")[6].value=200-rangeValues[7].value;
        document.querySelectorAll("input[type='range']")[6].value=200-rangeValues[7].value;
    }
});
rangeValues[7].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[6].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[7].value=200-rangeValues[6].value;
        document.querySelectorAll("input[type='range']")[7].value=200-rangeValues[6].value;
    }
});
//N=5;
rangeValues[8].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[9].value)) == false){
        document.querySelectorAll("input[type='number']")[8].value=200-rangeValues[9].value;
        document.querySelectorAll("input[type='range']")[8].value=200-rangeValues[9].value;
    }
});
rangeValues[9].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[8].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[9].value=200-rangeValues[8].value;
        document.querySelectorAll("input[type='range']")[9].value=200-rangeValues[8].value;
    }
});