// add listeners to each instance of degree picker widget
const dpForms = document.querySelectorAll(".degreePicker");
const dpCip2Divs = document.querySelectorAll("#cip2div");
const dpCip6Divs = document.querySelectorAll("#cip6div");

function cip2Fill(val, j) {
  var slug1s = degreePickerMapping[val];
  dpForms[j].cip2.innerHTML = "<option value=''>Choose a major</option>"
  
  // For each first level slug (cip2)
  var slug1_count = Object.keys(slug1s).length;
  for (var slug1 in slug1s) {
    var slug2s = slug1s[slug1];
    
    // create optgroup for use later in case more than 1 first level slugs
    var optgroup = document.createElement("optgroup");
    if(slug1=='other') {
      optgroup.label = "Other " + cipSlugNames[val];
    } else {
      optgroup.label = cipSlugNames[slug1];
    }

    // For each second level slug (cip4)
    for (var slug2 in slug2s) {
      var option = document.createElement("option");
      option.value = slug2.replace("1", slug1);
      option.text = slug2s[slug2];

      if (slug1_count > 1) {
        optgroup.appendChild(option); 
      } else {
        dpForms[j].cip2.appendChild(option);  
      }

    }

    if (slug1_count > 1) {
      dpForms[j].cip2.appendChild(optgroup); 
    }

  }
}

function cip6Fill(val, j) {
  cip0 = dpForms[j].cip0.value;
  
  for (slug1 in dpLevel3) {
    let has_concentrations = false;
    for (slug2 in dpLevel3[slug1]) {
      
      if (slug2.replace("1", slug1) == val) {
        has_concentrations = true;

        for (slug3 in dpLevel3[slug1][slug2]) {
          var option = document.createElement("option");
          option.value = slug3.replace("2", slug2).replace("1", slug1);
          option.text = dpLevel3[slug1][slug2][slug3];
          dpForms[j].cip6.appendChild(option); 
        }
      }
    }
  }
  
  // if no concentrations found
  if (dpForms[j].cip6.options.length == 1) {
    for (var k = 0; k < dpCip6Divs.length; k++) {
      dpCip6Divs[k].style.display = "none";
    }
    dpForms[j].cip6.disabled = true;
  
  } else {  // concentrations found
    for (var k = 0; k < dpCip6Divs.length; k++) {
      dpCip6Divs[k].style.display = "block";
    }
    dpForms[j].cip6.disabled = false;
  }

  dpForms[j].dpBtn.disabled = false;
  dpOffersFetch(dpForms[j].cip2.value);
}


for (var i = 0; i < dpForms.length; i++) {
  
  dpForms[i].cip0.addEventListener("change", function() {
    for (var j = 0; j < dpForms.length; j++) {
      dpForms[j].cip0.value = this.value;

      // Reset lower elements of form till cip2 selected
      for (var k = 0; k < dpCip6Divs.length; k++) {
        dpCip6Divs[k].style.display = "none";
      }
      document.getElementById("cip6").innerHTML = "<option value=''>No concentrations for this major</option>";
      document.getElementById("cip6").disabled = true;
      dpForms[j].dpBtn.disabled = true;
      
      if (this.value != '') {
        cip2Fill(this.value, j)
        
        dpLevel3Fetch(this.value);

        dpForms[j].cip2.disabled = false;
        for (var k = 0; k < dpCip2Divs.length; k++) {
          dpCip2Divs[k].style.display = "block";
        }


      } else {
        dpForms[j].cip2.disabled = true;
        dpForms[j].cip2.value = "";
        for (var k = 0; k < dpCip2Divs.length; k++) {
          dpCip2Divs[k].style.display = "none";
        }
      }
    }
  });
  
  dpForms[i].cip2.addEventListener("change", function() {
    for (var j = 0; j < dpForms.length; j++) {
      dpForms[j].cip2.value = this.value;
      dpForms[j].cip6.innerHTML = "<option value=''>Choose an emphasis (optional)</option>";
                                          
      if (this.value != '') {
        cip6Fill(this.value, j);
        dpOffersFetch(dpForms[j].cip2.value);
      } else {
        dpForms[j].cip6.disabled = true;
        dpForms[j].dpBtn.disabled = true;
      }
    }
  });
  
  dpForms[i].cip6.addEventListener("change", function() {
    for (var j = 0; j < dpForms.length; j++) {
      dpForms[j].cip6.value = this.value;                                   
      if (this.value != '') {
        dpOffersFetch(dpForms[j].cip6.value); 
      } else {
        dpOffersFetch(dpForms[j].cip2.value);
      }
    }
  });
  
  function dpSubmit(e) {
    if (e.preventDefault) e.preventDefault();
    var formData = new FormData(e.target);
    var formValues = Object.fromEntries(formData.entries());
    
    var major_slug = formValues.cip2;
        if (formValues.cip6 != "" && typeof formValues.cip6 !== 'undefined') { 
      major_slug=formValues.cip6
    }
    
    // if major_slug starts with 'popular-majors', redirect to popular offers page
    if (major_slug.startsWith("popular-majors/")) {      
      redirectToPopularOffers(major_slug);
      return false;
    }
    var template = "";
    if (formValues.template) {
      template = formValues.template;
    } else if (Object.keys(dpOffers).length > 0) {
      var offers = dpOffers["offers"].filter(item => item.relevance >= 0.7)
      if (offers.length >= 1) {
        template = "offers.html"
      }
    }
    location.href="https://www.collegefactual.com/majors/" + major_slug + "/" + template;
    return false;
  }

  if (dpForms[i].attachEvent) {
    dpForms[i].attachEvent("submit", dpSubmit);
  } else {
    dpForms[i].addEventListener("submit", dpSubmit);
  }
}

function redirectToPopularOffers(major_slug) {
  categoriesIds = major_slug.replace("popular-majors/", "");
  var linkTemplate = "https://www.esyoh.com/find-schools/?widget_program_option=[category_ids]&current_page_url=[current_page_url]&domain_id=collegefactual.com&src=custom_drop_down&placement=custom_drop_down";
  var current_page_url = encodeURIComponent(window.location.href);
  var link = linkTemplate.replace("[category_ids]", categoriesIds).replace("[current_page_url]", current_page_url);
  window.location.href = link;
}


let dpLevel3 = {};
function dpLevel3Fetch(slug0) {
  if (slug0 != "general") {
    fetch('/assets/js/dp/'+slug0+'.json')
      .then(response => response.json())
      .then(data => {
        dpLevel3Update(data);
      })
      .catch(error => {
        dpLevel3Update({});
      });
  } else {
    dpLevel3Update({});
  }
  function dpLevel3Update(response) {
    dpLevel3 = response;  
  }
}

let dpOffers = {};
function dpOffersFetch(major_slug) {
  var url = '/majors/' + major_slug + '/offers.json'
  fetch(url)
    .then(response => response.json())
    .then(data => {
      dpOfferUpdate(data);
    })
    .catch(error => {
      dpOfferUpdate({});
    });

  function dpOfferUpdate(response) {
    dpOffers = response;  
  }
}

// Preset degree picker dropdown.
if (typeof metaValues !== 'undefined' && metaValues["mf_cip0_slug"]) {
  for (var i = 0; i < dpForms.length; i++) {
    if(metaValues["mf_cip0_slug"] != ""){
      dpForms[i].cip0.value = metaValues["mf_cip0_slug"];
      cip2Fill(dpForms[i].cip0.value, i);
      dpForms[i].cip2.disabled = false
      dpLevel3Fetch(dpForms[i].cip0.value);
      if(metaValues["mf_cip4_slug"] != ""){
        dpForms[i].cip2.value = metaValues["mf_cip2_slug"] + "/" + metaValues["mf_cip4_slug"];
        dpForms[i].dpBtn.disabled = false
        cip6Fill(dpForms[i].cip2.value, i);
        for (var k = 0; k < dpCip6Divs.length; k++) {
          dpCip6Divs[k].style.display = "block";
        }
        dpForms[i].cip6.disabled = false
        
        if(metaValues["mf_cip6_slug"] != ""){
          dpForms[i].cip6.value = metaValues["mf_major_slug"];
        }
      }
    }
  }
}