document.addEventListener('keydown', function(event) {
       if (event.key === 'Enter') {
        event.preventDefault();
    }
    });

function GetCellValues() {
    var table = document.getElementById('demo');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            alert(table.rows[r].cells[c].innerHTML);
        }
    }
}

function getId(element) {
    alert("row" + element.parentNode.parentNode.rowIndex +
        " - column" + element.parentNode.cellIndex);
}


function getData(url, cb) {
    fetch(url)
        .then(response => response.json())
        .then(result => cb(result));
}

// getData("/static/database.json", (database) => console.log({ database }))


function showDiv() {
    document.getElementById('app').style.display = "block";
}

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }


// Script for Toggle Menu
function showMenu(){
    var navLinks = document.getElementById("navLinks")
    navLinks.style.right = "0"
}
function hideMenu(){
    var navLinks = document.getElementById("navLinks")
    navLinks.style.right = "-200px"
}

function disableRequired() {
  var MutName = document.getElementById('MutName');
  var WF = document.getElementById('WF');
  var MF = document.getElementById('MF');
  var WR = document.getElementById('WR');
  var MR = document.getElementById('MR'); 
  MutName.required = false;
  WF.required = false;
  MF.required = false;
  WR.required = false;
  MR.required = false;
}

function enableRequired() {
  var MutName = document.getElementById('MutName');
  var WF = document.getElementById('WF');
  var MF = document.getElementById('MF');
  var WR = document.getElementById('WR');
  var MR = document.getElementById('MR'); 
  MutName.required = true;
  WF.required = true;
  MF.required = true;
  WR.required = true;
  MR.required = true;
}

// Script for enable and disable inputs in the finder form
function toggleInput(inputId) {
  var geneInput = document.getElementById('geneInput');
  var ClinVarIDinput = document.getElementById('ClinVarIDinput');
  var geneRadio = document.getElementById('geneRadio');
  var ClinVarIDRadio = document.getElementById('ClinVarIDRadio');
  var MutName = document.getElementById('MutName');
  var WF = document.getElementById('WF');
  var MF = document.getElementById('MF');
  var WR = document.getElementById('WR');
  var MR = document.getElementById('MR');
  var csvFileInputseq = document.getElementById('csvFileInputseq');

  if (inputId === 'geneInput') {
    geneInput.required = true;
    ClinVarIDinput.required = false;
    ClinVarIDinput.disabled = true;
    ClinVarIDRadio.checked = false;
    geneRadio.checked = true;
    MutName.required = false;
    WF.required = false;
    MF.required = false;
    WR.required = false;
    MR.required = false;
    var checkbox = document.getElementById('UseOnlyCustomcheck');
    checkbox.checked = false;

  } else if (inputId === 'ClinVarIDinput') {
    geneInput.required = false;
    ClinVarIDinput.required = true;
    geneRadio.checked = false;
    ClinVarIDRadio.checked = true;
    geneInput.disabled = true;
    var checkbox = document.getElementById('UseOnlyCustomcheck');
    checkbox.checked = false;


  } else if (inputId === 'UseOnlyCustomcheck') {
    var checkbox = document.getElementById(inputId);
    if (checkbox.checked) {
      geneInput.required = false;
      ClinVarIDinput.required = false;
      geneRadio.checked = false;
      ClinVarIDRadio.checked = false;
      // geneInput.disabled = false;   
      MutName.required = true;

      if (csvFileInputseq.value.length > 0) {
        MutName.required = false;
        WF.required = false;
        MF.required = false;
        WR.required = false;
        MR.required = false;
  
      } else {
        MutName.required = true;
        WF.required = true;
        MF.required = true;
        WR.required = true;
        MR.required = true;
      }

    } else {
      geneInput.required = true;
      ClinVarIDinput.required = false;
      // ClinVarIDinput.disabled = true;
      ClinVarIDRadio.checked = false;
      geneRadio.checked = true;  
      MutName.required = false;
      WF.required = false;
      MF.required = false;
      WR.required = false;
      MR.required = false;     
    }
  }

  // geneInput.disabled = inputId !== 'geneInput';
  geneInput.disabled = !(inputId === 'geneInput' || inputId === 'UseOnlyCustomcheck');
  ClinVarIDinput.disabled = inputId !== 'ClinVarIDinput';
}

// Script to validate the input form
// function validateForm(event) {
//   var geneInput = document.getElementById('geneInput');
//   var ClinVarIDinput = document.getElementById('ClinVarIDinput');
//
//   if (ClinVarIDinput.disabled && ) {
//     event.preventDefault();
//     alert('Please select an input field.');
//   }
//
//   if (geneInput.disabled) {
//     event.preventDefault();
//     alert('Please select an input field.');
//   }
//
// }

// Warn the user when leaving the page
// window.onbeforeunload = function() {
//     return "Are you sure you want to leave this page?";
// };
//
// // Warn the user when leaving the page
// window.reload = function() {
//   var geneInput = document.getElementById('geneInput');
//   var ClinVarIDinput = document.getElementById('ClinVarIDinput');
//   console.log("hihihi")
//   ClinVarIDinput.required = false;
//   ClinVarIDinput.disabled = true;
//   geneInput.checked = true;
// }


function ReloadFinder(){
  var geneInput = document.getElementById('geneInput');
  var ClinVarIDinput = document.getElementById('ClinVarIDinput');
  var geneRadio = document.getElementById('geneRadio');
  var ClinVarIDRadio = document.getElementById('ClinVarIDRadio');
  ClinVarIDinput.required = false;
  ClinVarIDinput.disabled = true;
  geneRadio.checked = true;
  geneInput.value = ""
  ClinVarIDRadio.checked = false;
}


function emailInput(){
  var emailInput = document.getElementById('email');
  var emailTextInput = document.getElementById('emailtext');
  
  if (emailInput.checked) {
    emailTextInput.disabled = false
    emailTextInput.required = true
  } else {
    emailTextInput.disabled = true
    emailTextInput.required = false
  }
}


function loadSampleData(SampleID){
  var geneInput = document.getElementById('geneInput');
  var ClinVarIDinput = document.getElementById('ClinVarIDinput');

  var geneRadio = document.getElementById('geneRadio');
  var ClinVarIDRadio = document.getElementById('ClinVarIDRadio');

  var name = document.getElementById('MutName');
  var WF = document.getElementById('WF');
  var MF = document.getElementById('MF');
  var WR = document.getElementById('WR');
  var MR = document.getElementById('MR');

  var CasName = document.getElementById('CasName');
  var PAMpattern = document.getElementById('PAMpattern');
  var Variant = document.getElementById('Variant');

  var onlycustomcheck = document.getElementById('UseOnlyCustomcheck');

  var PAMindex = document.getElementById('PAMindex');
  var PAMchain = document.getElementById('PAMchain');
  var PAMcompchain = document.getElementById('PAMcompchain');
  var PAMpatternStr = document.getElementById('PAMpatternStr');
  var Protchain = document.getElementById('Protchain');

  if (SampleID === 'geneSample') {
    ClinVarIDinput.required = false;
    ClinVarIDinput.disabled = true;
    ClinVarIDinput.value = ""
    geneRadio.checked = true;
    geneInput.value = "krt14";
    ClinVarIDRadio.checked = false;
    geneInput.disabled = false;
    onlycustomcheck.checked = false;
    if (onlycustomcheck.checked) {
      disableRequired()}

  } else if (SampleID === 'ClinVarIDSample') {

    ClinVarIDRadio.checked = true;
    geneRadio.checked = false;
    geneInput.required = false;
    geneInput.disabled = true;
    ClinVarIDRadio.checked = true;
    ClinVarIDinput.value = "2471489, 732689";
    ClinVarIDinput.disabled = false;
    onlycustomcheck.checked = false;
    if (onlycustomcheck.checked) {
      disableRequired()}

  } else if (SampleID === 'addMut') {
    name.value = "Custom Pam";
    WF.value = "AAAACGTGTTCTCGTGACTCAGCAATTTCCTTGTCAGAATCCATTACCTGT";
    WR.value = "ACAGGTAATGGATTCTGACAAGGAAATTGCTGAGTCACGAGAACACGTTTT";
    MF.value = "AAAACGTGTTCTCGTGACTCAGCAAATTCCTTGTCAGAATCCATTACCTGT";
    MR.value = "ACAGGTAATGGATTCTGACAAGGAATTTGCTGAGTCACGAGAACACGTTTT";

  } else if (SampleID === 'addCas') {
    CasName.value = "SampleName"
    PAMpattern.value = "NNGRRT"
    Variant.value = "RVR"

  } else if (SampleID === 'addStructure') {
   PAMindex.value = "5,6,7,8"
   PAMchain.value = "D"
   PAMcompchain.value = "C"
   PAMpatternStr.value = "TATV"
   Protchain.value = "B"

  }
}

function addInputFields() {

    event.preventDefault();

    const inputWrapper = document.querySelector('.dynamic-input-wrapper .input-wrapper');
    const clonedInputWrapper = inputWrapper.cloneNode(true);

    const removeButton = document.createElement('button');
    removeButton.textContent = '-';
    removeButton.className = 'remove-btn';
    removeButton.addEventListener('click', removeInputWrapper);
    clonedInputWrapper.appendChild(removeButton);

    const dynamicInputWrapper = document.getElementById('dynamic-input-wrapper');
    dynamicInputWrapper.appendChild(clonedInputWrapper);
  }

  function removeInputWrapper(event) {
    event.preventDefault();
    const inputWrapper = event.target.parentNode;
    const dynamicInputWrapper = document.getElementById('dynamic-input-wrapper');
    dynamicInputWrapper.removeChild(inputWrapper);
  }

  function addSeq() {

    event.preventDefault();
    const inputWrapperseq = document.querySelector('.dynamic-input-wrapper-seq .input-wrapper-seq');
    const clonedInputWrapperseq = inputWrapperseq.cloneNode(true);

    const removeButtonseq = document.createElement('button');
    removeButtonseq.textContent = '-';
    removeButtonseq.className = 'remove-btn';
    removeButtonseq.addEventListener('click', removeInputWrapperseq);
    clonedInputWrapperseq.appendChild(removeButtonseq);

    const dynamicInputWrapperseq = document.getElementById('dynamic-input-wrapper-seq');
    dynamicInputWrapperseq.appendChild(clonedInputWrapperseq);
  }

  function removeInputWrapperseq(event) {
    event.preventDefault();
    const inputWrapperseq = event.target.parentNode;
    const dynamicInputWrapperseq = document.getElementById('dynamic-input-wrapper-seq');
    dynamicInputWrapperseq.removeChild(inputWrapperseq);
  }

      /////// Disable Run AlPaCas Optimizer button if a structure is not avilable: event listener, 
    // to ensure the proper appearance of the button the first time the page is loaded  /////// 

    window.addEventListener('load', function() {
      // Get all select elements with a specific class or other criteria
      var selectElements = document.querySelectorAll('select[name="CasTargetsIdentified"]');
      selectElements.forEach(function(select) {
          // Call the handleOptionChange function for each select element
          handleOptionChange(select);
      });
  });

  async function fetchFiles(JobID) {
    try {
        const response = await fetch(`/get_added_pdbs/${JobID}`);
        const files = await response.json();
        return files 
    } catch (error) {
        console.error('Error fetching files:', error);
    }
}
  function handleOptionChange(selectElement) {

    // Get the selected value, i.e. a Cas name
    var casValue = selectElement.value;

    // Get the parent div's ID, i.e. "JobID:VariationID" //It is the VariationID of the selected box
    var parentDivId = selectElement.parentNode.id;
    const tmp = parentDivId.split(":");

    const jobID = tmp[0]; // JobID

    const variationID = tmp[1]; // VariationID

    var filename = 'structure_check.json'; // static file with informations 

    /////// Disable Run AlPaCas Optimizer button if a structure is not avilable /////// 
    /////// Disable Run AlPaCas Optimizer button if a structure is not avilable: upon click /////// 
    // var files = fetchFiles(jobID);
    // files.then((files)=>{
    //  filesarray = files});
    
    var url = '/alpacas/static/__placeholder__'; // get url to file
    url = url.replace('__placeholder__', filename); // get url to file

    fetch(url) // fetch url
    .then(response => response.json())
    .then(jsonObject => {
      var tmpCas = casValue.split("-")[0]
      var value = jsonObject[tmpCas]; // Get the corresponding values for the selected Cas
      var button = document.getElementById(variationID + ":RunAObutton"); // get button Object by ID
      if (value === "True") {
        button.disabled = false;
      }
      else if (value === "False") {
        button.disabled = true;
      } else if (value === undefined) {
        button.disabled = false;
      } 
      // if (value === "True" || filesarray && filesarray.includes(casValue)) {
      //   button.disabled = false;
      // } else if (value === "False") {
      //   button.disabled = true;
      // } else if (value === undefined) {
      //   button.disabled = false;
      // } 
    });

    // Make up the url to the 'VariationID.json' file
    var subdirectory = jobID;
    var filename = subdirectory + "/" + variationID + '.json';
    var url = '/alpacas/result/__placeholder__';
    url = url.replace('__placeholder__', filename);

    // Get the 'VariationID.json' file and Parse information
    fetch(url)
      .then(response => response.json())
      .then(jsonObject => {
        // Get the corresponding values for the selected Cas
        var value = jsonObject[casValue];
        // Iterate for both occurrences Mut and Mut-Rev to check if these are found for the selected Cas
        var stringList = ["Mut", "Mut-Rev"];

        // Remove background color to all sequences
        // Get the code element corresponding to Wt and Mut sequences
        var codeElementWt = document.getElementById(parentDivId + ":wt");
        // var codeElementWtText = codeElementWt.textContent;
        // var highlightedText = '<span class="delight">' + codeElementWtText + '</span>';
        // codeElementWt.innerHTML = highlightedText;

        var codeElementMut = document.getElementById(parentDivId + ":mut");
        // var codeElementMutText = codeElementMut.textContent;
        // var highlightedText = '<span class="delight">' + codeElementMutText + '</span>';
        // codeElementMut.innerHTML = highlightedText;

        var codeElementWtRev = document.getElementById(parentDivId + ":wtRev");
        // var codeElementWtRevText = codeElementWtRev.textContent;
        // var highlightedText = '<span class="delight">' + codeElementWtRevText + '</span>';
        // codeElementWtRev.innerHTML = highlightedText;

        var codeElementMutRev = document.getElementById(parentDivId + ":mutRev");
        // var codeElementMutRevText = codeElementMutRev.textContent;
        // var highlightedText = '<span class="delight">' + codeElementMutRevText + '</span>';
        // codeElementMutRev.innerHTML = highlightedText;

        var sequence = document.getElementById(parentDivId + ":wt");
        var sequenceText = sequence.textContent;
        var char25 = sequenceText.charAt(25); // The index is zero-based, so the 26th character is at index 25
        var highlightedSequence = sequenceText.slice(0, 25) + '<span class="different-color monospace">' + char25 + '</span>' + sequenceText.slice(26);
        sequence.innerHTML = highlightedSequence;

        var sequence = document.getElementById(parentDivId + ":mut");
        var sequenceText = sequence.textContent;
        var char25 = sequenceText.charAt(25); // The index is zero-based, so the 25th character is at index 24
        var highlightedSequence = sequenceText.slice(0, 25) + '<span class="different-color monospace">' + char25 + '</span>' + sequenceText.slice(26);
        sequence.innerHTML = highlightedSequence;

        var sequence = document.getElementById(parentDivId + ":wtRev");
        var sequenceText = sequence.textContent;
        var char25 = sequenceText.charAt(25); // The index is zero-based, so the 25th character is at index 24
        var highlightedSequence = sequenceText.slice(0, 25) + '<span class="different-color monospace">' + char25 + '</span>' + sequenceText.slice(26);
        sequence.innerHTML = highlightedSequence;

        var sequence = document.getElementById(parentDivId + ":mutRev");
        var sequenceText = sequence.textContent;
        var char25 = sequenceText.charAt(25); // The index is zero-based, so the 25th character is at index 24
        var highlightedSequence = sequenceText.slice(0, 25) + '<span class="different-color monospace">' + char25 + '</span>' + sequenceText.slice(26);
        sequence.innerHTML = highlightedSequence;

        stringList.forEach(function(currentString) {
          if (currentString === "Mut") {
            // If Mut found
            if (value.split(":")[0] === "Mut") {
              var charToHigh = value.split(":")[2];
              // Split the string into an array of substrings, i.e. 2-3-4
              var substrings = charToHigh.split("-");
              var startIndex = substrings[0] // i.e. 2
              var lastIndex = substrings[substrings.length - 1]; // i.e. 4
              // Modify WT sequence
              var codeElementWtText = codeElementWt.textContent;
              var char25 = codeElementWtText.charAt(25);
              // var highlightedText = codeElementWtText.substring(0, parseInt(startIndex)) + '<span class="highlight monospace">' + codeElementWtText.substring(parseInt(startIndex), parseInt(lastIndex)+1) + '</span>' + codeElementWtText.substring(parseInt(lastIndex)+1);
              var highlightedText = codeElementWtText.substring(0, parseInt(startIndex)) + '<span class="highlightgreen monospace">' + codeElementWtText.substring(parseInt(startIndex), 25) + '<span class="different-color monospace">' + char25 + '</span>' + codeElementWtText.substring(26, parseInt(lastIndex)+1) + '</span>' + codeElementWtText.substring(parseInt(lastIndex)+1);
              codeElementWt.innerHTML = highlightedText;

              // Modify Mut sequence
              var codeElementMutText = codeElementMut.textContent;
              var char25 = codeElementMutText.charAt(25);
              // var highlightedText = codeElementMutText.substring(0, parseInt(startIndex)) + '<span class="highlight monospace">' + codeElementMutText.substring(parseInt(startIndex), parseInt(lastIndex)+1) + '</span>' + codeElementMutText.substring(parseInt(lastIndex)+1);
              var highlightedText = codeElementMutText.substring(0, parseInt(startIndex)) + '<span class="highlightorange monospace">' + codeElementMutText.substring(parseInt(startIndex), 25) + '<span class="different-color monospace">' + char25 + '</span>' + codeElementMutText.substring(26, parseInt(lastIndex)+1) + '</span>' + codeElementMutText.substring(parseInt(lastIndex)+1);

              codeElementMut.innerHTML = highlightedText;
            }

          } else if (currentString === "Mut-Rev") {
            // elif MutRev Found
            if (value.split(":")[0] === "Mut-Rev") {
              var charToHigh = value.split(":")[2];
              // Split the string into an array of substrings, i.e. 2-3-4
              var substrings = charToHigh.split("-");
              var startIndex = substrings[0] // i.e. 2
              var lastIndex = substrings[substrings.length - 1]; // i.e. 4
              // Modify WT sequence
              var codeElementWtRevText = codeElementWtRev.textContent;
              var char25 = codeElementWtRevText.charAt(25);
              // var highlightedText = codeElementWtRevText.substring(0, parseInt(startIndex)) + '<span class="highlight monospace">' + codeElementWtRevText.substring(parseInt(startIndex), parseInt(lastIndex)+1) + '</span>' + codeElementWtRevText.substring(parseInt(lastIndex)+1);
              var highlightedText = codeElementWtRevText.substring(0, parseInt(startIndex)) + '<span class="highlightgreen monospace">' + codeElementWtRevText.substring(parseInt(startIndex), 25) + '<span class="different-color monospace">' + char25 + '</span>' + codeElementWtRevText.substring(26, parseInt(lastIndex)+1) + '</span>' + codeElementWtRevText.substring(parseInt(lastIndex)+1);
              codeElementWtRev.innerHTML = highlightedText;

              // Modify Mut sequence
              var codeElementMutRevText = codeElementMutRev.textContent;
              var char25 = codeElementMutRevText.charAt(25);
              //var highlightedText = codeElementMutRevText.substring(0, parseInt(startIndex)) + '<span class="highlight monospace">' + codeElementMutRevText.substring(parseInt(startIndex), parseInt(lastIndex)+1) + '</span>' + codeElementMutRevText.substring(parseInt(lastIndex)+1);
              var highlightedText = codeElementMutRevText.substring(0, parseInt(startIndex)) + '<span class="highlightorange monospace">' + codeElementMutRevText.substring(parseInt(startIndex), 25) + '<span class="different-color monospace">' + char25 + '</span>' + codeElementMutRevText.substring(26, parseInt(lastIndex)+1) + '</span>' + codeElementMutRevText.substring(parseInt(lastIndex)+1);
              codeElementMutRev.innerHTML = highlightedText;
            }
          }
        });
      })
      .catch(error => console.error(error));
  }


function ShowHideFilter(){
    var displayOptions = document.getElementById("display-options");
    if (displayOptions.style.display === "none") {
      displayOptions.style.display = "block";
      document.getElementById("menu-button").textContent = "Hide Filter";
    } else {
      displayOptions.style.display = "none";
      document.getElementById("menu-button").textContent = "Show Filter";
    }
  };

function SelectAll(checkid){
  var parentDivId = checkid.parentNode.parentNode.id;
  var container = document.getElementById(parentDivId);
  var uncheckedCheckboxes = container.querySelectorAll("input[type='checkbox']:not(:checked)");
  var checkboxes = container.querySelectorAll("input[type='checkbox']");

  var allCheckbox = container.querySelector("#All");
  var shouldCheck = allCheckbox.checked;

  checkboxes.forEach(function(checkbox) {
    if (checkbox !== allCheckbox) {
      checkbox.checked = shouldCheck;
    }
  });
}

document.addEventListener('DOMContentLoaded', function () {
  const fileInput = document.getElementById('csvFileInput');
  const loadFileButton = document.getElementById('loadFileButton');
  const fileInfoDiv = document.getElementById('fileInfo');
  const checkbox = document.getElementById('UseOnlyCustomcheck');
  if (checkbox) {
    checkbox.checked = false;
  }
  if (loadFileButton) {
      loadFileButton.addEventListener('click', function () {
          fileInput.click();
      });
  }

  if (fileInput) {
      fileInput.addEventListener('change', function () {
          const file = fileInput.files[0];
          if (file) {
              const fileName = file.name;
              const fileSize = file.size;

              if (fileName.endsWith('.csv')) {
                  fileInfoDiv.innerText = ``;
              } else {
                  fileInfoDiv.innerText = 'Please select a valid CSV file.';
              }
          }
      });
  }
});