var energy = [];
var jpi = [];
var Name;

function GetData(){

  Name = document.getElementById('isotopes_name').value;
  let maxEx = parseFloat(document.getElementById('maxEx').value);

  console.log(maxEx);

  let str = 'get_nuclear_data.py?isotopes_name=' + Name + "&maxEx=" + maxEx;

  let client = new XMLHttpRequest();
  client.onreadystatechange = function() {
    let haha = client.responseText.split('\n').slice(17);
    
    jpi = [];
    energy = [];
    haha.forEach(line =>{
      // console.log(line);
      if( line.includes("<tr><td style=")  && line.length != 0) {
        jpi.push(line.substring(98).slice(0,-10).trim());
        energy.push(parseFloat(line.substring(43,54).trim())/1000.);
        // console.log(jpi[jpi.length - 1] + ", " + energy[energy.length-1]);
      }
    });
  }
  client.open('GET', str, false);
  client.send();
  
}
function PlotLevels(){

  GetData();

  Plotly.purge("Plot_Levels");

  if( energy.length == 0 ) return;

  // console.log( Name + " | num. states : " + energy.length);
  
  const plotWidth = 300;
  const plotHeight = 600;
  const yMin = -1;
  const maxExExp = Math.max(...energy);

  // console.log(maxExExp);

  // let maxY = parseFloat(document.getElementById('plotRange').value);

  const fig = {
    data: [],
    layout: {
      plot_bgcolor: 'white',
      width: plotWidth,
      height: plotHeight,
      margin: { l: 0, r: 0, t: 0, b: 0 },
      showlegend: false,
      xaxis: {
        showline: false,
        visible: false,
        range: [-0.5, 3]
      },
      yaxis: {
        range: [yMin, maxExExp + 1],
        showline: false,
        visible: false
      },
      annotations: []
    }
  };

  const l = energy.length;

  const fontSize = 14;
  const fontSizeMeV = fontSize / plotHeight * (maxExExp + 1 - yMin);

  let ypos = [];
  for( let i = 0; i < energy.length; i++) ypos.push(energy[i]);

  let noOverlap = false;
  let loop = 0;

  while (!noOverlap && loop < 2 * l) {
    for (let i = 1; i <= l; i++) {
      const diff = ypos[i] - ypos[i - 1];
      if (diff < fontSizeMeV) {
        ypos[i - 1] += (diff - fontSizeMeV) / 2;
        ypos[i] += (fontSizeMeV - diff) / 2;
        if (ypos[i - 1] < yMin + fontSizeMeV / 2) {
          ypos[i - 1] = yMin + fontSizeMeV / 2;
          ypos[i] = ypos[i - 1] + fontSizeMeV;
        }
      }
    }
    let count = 0;
    for (let i = 1; i <= l; i++) {
      const diff = ypos[i] - ypos[i - 1];
      if (diff > fontSizeMeV) {
        count++;
      }
    }
    if (count === l) {
      noOverlap = true;
    }
    loop++;
  }

  for (let i = 0; i < l; i++) {
    fig.data.push({
      x: [0, 1],
      y: [energy[i], energy[i]],
      mode: 'lines',
      line: { color: 'black', width: 1 }
    });

    fig.data.push({
      x: [1.03, 1.1, 1.19],
      y: [energy[i], ypos[i], ypos[i]],
      mode: 'lines',
      line: { color: 'gray', width: 1 }
    });

    // console.log(energy[i]+ ", " + ypos[i]);

    fig.layout.annotations.push({
      x: 1.2,
      y: ypos[i],
      text: `${energy[i].toFixed(3)}, ${jpi[i]}`,
      xanchor: 'left',
      font: { size: fontSize },
      showarrow: false
    });
  }

  // let NameYPos = (parseFloat(maxEx) + 2*fontSizeMeV);
  // console.log(NameYPos);

  fig.layout.annotations.push({
    x: 0.5,
    y: (parseFloat(maxEx) + 0.5),
    text: Name,
    font: { size: 2 * fontSize },
    showarrow: false
  });

  // Create the plot
  Plotly.newPlot('Plot_Levels', fig.data, fig.layout);

}