let donation_base = 10
let donation_fraction = 1

///////////////////////////////////////////////////////
//////          PIE CHARTS                ////////////
////       For the winningCalculator Try Out site without elicitation above//////
/// For changes, first change the main pie_chart file and then adapt it here ////
//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'];

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
    }
   }
});

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

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

//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[0];
let ownSabotage = rangeValues[1];
let othersEffort = rangeValues[2];
let othersSabotage = rangeValues[3];


//////////////////////////////////////////////////////////////////////////
///////////////////       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<4; 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;
            //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) + '%']
            //bonus= externality_effort*(e+ (n-1)*e_j) - externatlity_sabotage*(s+(n-1)*s_j);
            //Updating the performance and others performances for display
            document.getElementById('performance'+n).value=0;
            document.getElementById('othersPerformance'+n).value=0;
            document.getElementById('donation'+n).value=donation_base;
        }
        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;
            donation=(performance+othersPerformance*(n-1))*donation_fraction+donation_base
            //= 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('performance'+n).value=Math.round(performance*10)/10;
            document.getElementById('othersPerformance'+n).value=Math.round(othersPerformance*10)/10;
            document.getElementById('donation'+n).value=Math.round(donation*10)/10;
        };
        //Update pieChart for group size n=1 since it doesn't get attributed
        document.getElementById('performance1').value=e;
        document.getElementById('donation1').value=e*donation_fraction+donation_base;
       // document.getElementById('bonus1').value=Math.round((externality_effort*e-externatlity_sabotage*s)*10)/10;
        document.getElementById('payoffWin').value=400-e-s;
        document.getElementById('payoffLose').value=200-e-s;
        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_try]').value = parseInt(document.querySelector('[name=clicksEffort_calc_try]').value) + parseInt(1);
    // Then we write the number into a string and add it with a comma
    //document.querySelector('[name=valuesEffort_calc_try]').value = document.querySelector('[name=valuesEffort_calc_try]').value + a.target.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
    // THIS HAS TO BE CHANGED FOR TREATMENT N=3
    else {
       document.querySelectorAll("input[type='number']")[0].value = 200-s;
       document.querySelectorAll("input[type='range']")[0].value =  200-s;
       updatePieChart(200-s,s,e_j,s_j);
    };
    });

ownSabotage.addEventListener ('click', a => {
    document.querySelector('[name=clicksSabotage_calc_try]').value = parseInt(document.querySelector('[name=clicksSabotage_calc_try]').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']")[1].value = 200-e;//document.querySelector('[name=previousSabotage]').value;
        document.querySelectorAll("input[type='range']")[1].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_try]').value = parseInt(document.querySelector('[name=clicksOpponentEffort_calc_try]').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']")[2].value = 200 - s_j; //document.querySelector('[name=previousOpponentEffort]').value;
        document.querySelectorAll("input[type='range']")[2].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_try]').value = parseInt(document.querySelector('[name=clicksOpponentSabotage_calc_try]').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']")[3].value = 200-e_j; //document.querySelector('[name=previousOpponentSabotage]').value;
        document.querySelectorAll("input[type='range']")[3].value = 200-e_j;//document.querySelector('[name=previousOpponentSabotage]').value;
        updatePieChart(e,s,e_j,200-e_j);
    }
    });

///////////////////////////////////
//////////  Checkbox //////////////
///////////////////////////////////
function displayAdvancedCalculator() {
  var text = document.getElementById('text');
  var text2 = document.getElementById('text2');
  var text3 = document.getElementById('text3');
  var simpleCalc = document.getElementById('simpleCalc')
  var checkBoxText = document.getElementById('advancedCheck');
  var normalButton = document.getElementById('normalButton');
  text.style.display = "block";
  text2.style.display = "block";
  text3.style.display = "block";
  text6.style.display = "block";
  simpleCalc.style.display = "none";
  checkBoxText.style.display = "none";
  normalButton.style.display = "block";
  updatePieChartAdvanced();
}

function displayNormalCalculator() {
  var checkBox = document.getElementById('advanced');
  var text = document.getElementById('text');
  var text2 = document.getElementById('text2');
  var text3 = document.getElementById('text3');
  var simpleCalc = document.getElementById('simpleCalc')
  var checkBoxText = document.getElementById('advancedCheck');
  var normalButton = document.getElementById('normalButton');
  normalButton.style.display= "none";
  checkBoxText.style.display = "block";
  text.style.display = "none";
  text2.style.display = "none";
  text3.style.display = "none";
  text6.style.display = "none";
  simpleCalc.style.display = "";
  //Update pie Chart with the normal calculator input
  e=Number(ownEffort.value);
  s=Number(ownSabotage.value);
  e_j=Number(othersEffort.value);
  s_j=Number(othersSabotage.value);
  updatePieChart(e,s,e_j,s_j)
}

///////////////////////////
// Advanced Calculator ////
///////////////////////////

function updatePieChartAdvanced() {
    //e = parseInt(e.target.value)
    let e_i = parseInt(document.getElementById('effort_p1_calc_try').value)
    let s_i = parseInt(document.getElementById('sabotage_p1_calc_try').value)
    let effort_p2 = parseInt(document.getElementById('effort_p2_calc_try').value)
    let sabotage_p2 = parseInt(document.getElementById('sabotage_p2_calc_try').value)
    let effort_p3 = parseInt(document.getElementById('effort_p3_calc_try').value)
    let sabotage_p3 = parseInt(document.getElementById('sabotage_p3_calc_try').value)

    document.getElementById('payoffWin').value=400-e_i-s_i;
    document.getElementById('payoffLose').value=200-e_i-s_i;

    //n=1
    donation = donation_base+e_i*donation_fraction
    updatePieChartAdvanced2(1, 1, e_i, "None", donation)

    // n=2
    performance_i = e_i / (1 + sabotage_p2)
    performance_p2 = effort_p2 / (1 + s_i)
    totalPerformance = performance_i + performance_p2
    donation=donation_base+totalPerformance*donation_fraction
    if(totalPerformance==0){
        winning_i = 0.5
    }
    else {
        winning_i = performance_i/totalPerformance
    }
    updatePieChartAdvanced2(2, winning_i, performance_i, performance_p2, donation)
    //n=3
    performance_i = e_i / (1 + sabotage_p2 + sabotage_p3)
    performance_p2 = effort_p2 / (1 + s_i + sabotage_p3)
    performance_p3 = effort_p3 / (1 + s_i + sabotage_p2)
    totalPerformance = performance_i + performance_p2 + performance_p3
    donation=donation_base+totalPerformance*donation_fraction
    if(totalPerformance==0){
        winning_i = 1/3
    }
    else {
        winning_i = performance_i/totalPerformance
    }
    avgPerformanceOthers = (performance_p2 + performance_p3)/2
    updatePieChartAdvanced2(3, winning_i, performance_i, avgPerformanceOthers, donation)
}

function updatePieChartAdvanced2(n, win, performance, othersPerformance, donation) {
        pieCharts[n-1].data.datasets[0].data[0]=Math.round(win*100)/100;
        pieCharts[n-1].data.datasets[0].data[1]=Math.round((1-win)*100)/100;
        //Updating the PieCharts Labels with the new probabilities
        pieCharts[n-1].data.labels=['Probability to win: '+ Math.round(win*100) +'%', 'Probability to lose: '
        + Math.round((1-win)*100) + '%']
        //Updating the performance and others performances for display
        document.getElementById('performance'+n).value=Math.round(performance*10)/10;
        document.getElementById('othersPerformance'+n).value=Math.round(othersPerformance*10)/10;
        document.getElementById('donation'+n).value=Math.round(donation*10)/10;
        pieCharts[n-1].update();
}

/// EventListeners for the Advanced pieChart
document.getElementById('effort_p1_calc_try').addEventListener('input', e=> {
document.querySelector('[name=clicksEffort_calc_advanced_try]').value = parseInt(document.querySelector('[name=clicksEffort_calc_advanced_try]').value) + parseInt(1);
if (e.target.value>100){
    alert("The maximum amount is 100");
    document.getElementById('effort_p1_calc_try').value = 100
}
updatePieChartAdvanced();
} )

document.getElementById('sabotage_p1_calc_try').addEventListener('input', e=> {
document.querySelector('[name=clicksSabotage_calc_advanced_try]').value = parseInt(document.querySelector('[name=clicksSabotage_calc_advanced_try]').value) + parseInt(1);
if (e.target.value>100){
    alert("The maximum amount is 100");
    document.getElementById('sabotage_p1_calc_try').value = 100

}
updatePieChartAdvanced();
} )


document.getElementById('effort_p2_calc_try').addEventListener('input', e=> {
document.querySelector('[name=clicksOpponentEffort_calc_advanced_try]').value = parseInt(document.querySelector('[name=clicksOpponentEffort_calc_advanced_try]').value) + parseInt(1);
if (e.target.value>100){
    alert("The maximum amount is 100");
    document.getElementById('effort_p2_calc_try').value = 100
}
updatePieChartAdvanced()
} )

document.getElementById('sabotage_p2_calc_try').addEventListener('input', e=> {
document.querySelector('[name=clicksOpponentSabotage_calc_advanced_try]').value = parseInt(document.querySelector('[name=clicksOpponentSabotage_calc_advanced_try]').value) + parseInt(1);
if (e.target.value>100){
    alert("The maximum amount is 100");
    document.getElementById('sabotage_p2_calc_try').value = 100
}
updatePieChartAdvanced()
} )

document.getElementById('effort_p3_calc_try').addEventListener('input', e=> {
document.querySelector('[name=clicksOpponentEffort_calc_advanced_try]').value = parseInt(document.querySelector('[name=clicksOpponentEffort_calc_advanced_try]').value) + parseInt(1);
if (e.target.value>100){
    alert("The maximum amount is 100");
    document.getElementById('effort_p3_calc_try').value = 100
}
updatePieChartAdvanced()
} )

document.getElementById('sabotage_p3_calc_try').addEventListener('input', e=> {
document.querySelector('[name=clicksOpponentSabotage_calc_advanced_try]').value = parseInt(document.querySelector('[name=clicksOpponentSabotage_calc_advanced_try]').value) + parseInt(1);
if (e.target.value>100){
    alert("The maximum amount is 100");
    document.getElementById('sabotage_p3_calc_try').value = 100
}
updatePieChartAdvanced()
} )