const slider = document.getElementById("car");
const skullSlider = document.getElementById("skull");
const progressRight = document.getElementById("progress-right");
const progressLeft = document.getElementById("progress-left");
const xLeft = document.querySelector('[name=example_x_left]');
const yLeft = document.querySelector('[name=example_y_left]');
const xRight = document.querySelector('[name=example_x_right]');
const yRight = document.querySelector('[name=example_y_right]');

    const people_left = {{ people_left }};
    const people_right = {{ people_right }};
    const people_middle = {{ people_middle }};


document.getElementById("plus").onclick = incrementX;
document.getElementById("minus").onclick = decrementX;

slider.value = getRandomInt(1, 99);
setValues(slider.value, true);

{% if graph1 != no_graph or graph2 != no_graph %}
    // GRAPH SCRIPTS
  function getNrAccidents(x) {
      return Math.round(((1/Math.pow(x, 1/8)) - 0.562) / 100 * 1000000)
  }

  let accidentList = [];
  let fatalityList = [];
  let labels = [];
  for(let i = 1; i <= 99; i++) {
      let accLeft = getNrAccidents(i);
      let accRight = getNrAccidents(100-i)
      accidentList.push(accLeft + accRight);
      fatalityList.push(accLeft * (people_left + people_middle) + accRight * (people_right + people_middle));
      labels.push('');
  }
  let currentAccidents = accidentList[slider.value - 1];
  let currentFatalities = fatalityList[slider.value - 1];

    // set data to graph accordingly (accidents or fatalities)
  let accidentData = {
      datasets: [{
          borderColor: 'rgb(65, 65, 65)',
          data: accidentList
      }]
  }
  accidentData = Object.assign(accidentData, {labels: labels});
  let fatalityData = {
      datasets: [{
          borderColor: 'rgb(65, 65, 65)',
          data: fatalityList
      }]
  }
  fatalityData = Object.assign(fatalityData, {labels: labels});

  function adjustRadiusBasedOnData(ctx) {
      const inputVal = slider.value;
      const v = ctx.parsed.x + 1;
      // console.log(inputVal, v, inputVal == v);
      return inputVal == v ? 4 : 0;
  }

  function adjustColorBasedOnData(ctx) {
      const inputVal = slider.value;
      const v = ctx.parsed.x + 1;
      return inputVal == v ? 'rgb(214, 60, 60)' : 'rgb(65, 65, 65)';
  }

  const fatalityConfig = {
      type: 'line',
      data: fatalityData,
      options: {
        responsive: true,
        animation: false,
        plugins: {
          title: {
              text: () => 'Todesopfer (gesamt): ' + currentFatalities,
              display: true,
              font: {
                  size: 20,
                  weight: 'bold',
              },
              color: 'rgb(65, 65, 65)',
              position: 'top',
              padding: {
                  top: 0,
                  bottom: -15
              }
          },
          legend: false,
        },
        elements: {
          point: {
              backgroundColor: adjustColorBasedOnData,
              radius: adjustRadiusBasedOnData,
          }
        },
        scales: {
          x: {
              display: true,
              grid: {
                  display: false,
                  drawOnChartArea: false,
              },
          },
          x2: {
              position: 'top',
              display: true,
              grid: {
                  display: false,
                  drawOnChartArea: false,
              },
          },
          y: {
              display: true,
              grid: {
                  display: false,
                  drawOnChartArea: false,
              },
              ticks: {
                  display: false,

              },
              min: 800,
              padding: {
                  right: 5
              }
          },
          y2: {
              position: 'right',
              display: true,
              grid: {
                  display: false,
                  drawOnChartArea: false,
              },
              ticks: {
                  display: false,

              },
              min: 800,
              padding: {
                  left: 5
              }
          }
        },
      spanGaps: true
    }
  };

  const accidentConfig = {
      type: 'line',
      data: accidentData,
      options: {
        responsive: true,
        animation: false,
        plugins: {
          title: {
              text: () => 'Zusammenstöße (gesamt): ' + currentAccidents,
              display: true,
              font: {
                  size: 20,
                  weight: 'bold',
              },
              color: 'rgb(65, 65, 65)',
              position: 'top',
              padding: {
                  top: 0,
                  bottom: -15
              }
          },
          legend: false,
        },
        elements: {
          point: {
              backgroundColor: adjustColorBasedOnData,
              radius: adjustRadiusBasedOnData,
          }
        },
        scales: {
          x: {
              display: true,
              grid: {
                  display: false,
                  drawOnChartArea: false,
              }
          },
          x2: {
              position: 'top',
              display: true,
              grid: {
                  display: false,
                  drawOnChartArea: false,
              },
          },
          y: {
              display: true,
              grid: {
                  display: false,
                  drawOnChartArea: false,
              },
              ticks: {
                  display: false,

              },
              min: 800,
              padding: {
                  right: 5
              }
          },
          y2: {
              position: 'right',
              display: true,
              grid: {
                  display: false,
                  drawOnChartArea: false,
              },
              ticks: {
                  display: false,

              },
              min: 800,
              padding: {
                  left: 5
              }
          }
        },
      spanGaps: true
    }
  };

    {% if graph1 == fatality or graph2 == fatality %}
      const fatalityChart = new Chart(
        document.getElementById('fatalityChart'),
        fatalityConfig
      );
    {% endif %}
    {% if graph1 == accident or graph2 == accident %}
      const accidentChart = new Chart(
        document.getElementById('accidentChart'),
        accidentConfig
      );
    {% endif %}

{% endif %}
  // SLIDER SCRIPTS
slider.oninput = function() {
  setValues(this.value, false);
}

function setValues(x, isInitial) {
  {% if people_middle == 1 %}
   skullSlider.value =(x - 50) * 0.71;
  {% endif %}
  let y_left = Math.round(((1/Math.pow(x, 1/8) - 0.562)/100)* 1000000);
  let y_right = Math.round(((1/Math.pow((100 - x), 1/8) - 0.562)/100)* 1000000);
  let y_max = Math.round(((1/Math.pow(1, 1/8) - 0.562)/100)* 1000000);    // to set progress bar width

  progressLeft.style.width = (y_left / y_max) * 90 + "%";
  progressRight.style.width = (y_right / y_max) * 90 + "%";

  if (!isInitial) {
      xLeft.value = x;
      yLeft.value = y_left;
      xRight.value = 100 - x;
      yRight.value = y_right;

      {% if graph1 != no_graph or graph2 != no_graph %}
      currentAccidents = accidentList[x-1];
      currentFatalities = fatalityList[x-1];
      {% if graph1 == fatality or graph2 == fatality %}
        fatalityChart.update();
      {% endif %}
      {% if graph1 == accident or graph2 == accident %}
        accidentChart.update();
      {% endif %}
      {% endif %}
  }
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min +1)) + min;
}

function incrementX() {
    slider.value++;
    setValues(slider.value, false);
}

function decrementX() {
    slider.value--;
    setValues(slider.value, false);
}