<div class="np-filter" tabindex="0">
  <div class="dropdown">
    <select
      class="category-filter-dropdown np-input"
      type="text"
      name="category-filter-dropdown"
      id="category-filter-dropdown"
      onchange="filterByCategory()"
    >
      {% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
      <option class="category-filter-entry" value="Default" selected>All Categories</option>

      {% for category in sorted_categories %}
        {% assign renderCat = false %}

        {% for course in courses.enrolled %}
          {% for course_category in course.categories %}
            {% if course_category.id == category.id %}
              {% assign renderCat = true %}
            {% endif %}
          {% endfor %}
        {% endfor %}

        {% comment %} Need to iterate over all filterable categories, target all searched cards, check if cat exists, render if found  {% endcomment %}

        {% comment %} Need to generate category entires dynamically? Might not be possible because liquid is server side. Would need to pull all cats before load but all Searched Results after render {% endcomment %}

        {%if renderCat %}
          <option class="category-filter-entry" value="{{ category.name }}">{{ category.name }}</option>
        {% endif %}
      {% endfor %}
    </select>
  </div>
</div>

<script>
  $('document').ready(function(){
    let allCategoryFilters = document.querySelectorAll('.category-filter-entry');
    let allSearchedResults = document.querySelectorAll('.course-card');
    let allCourses = (document.querySelector('.np-catalog-courses') !== null) ? document.querySelector('.np-catalog-courses').children : '';

    // for(let i = 0; i < allCourses.length; i++){
    //   allCourses[i].style.display = 'block';
    // }
console.log(allCategoryFilters.length);
    if(allCategoryFilters.length <= 1) {
      document.querySelector('.catalog-filter-component').style.display = 'none';
    } else {
      document.querySelector('.catalog-filter-component').style.display = 'block';
    }

    for(let i = 1; i < allCategoryFilters.length; i++){
      let productFound = false;
      for(let j = 0; j < allSearchedResults.length; j++){
        if(allSearchedResults[j].parentNode.dataset.categories){
          if(allSearchedResults[j].parentNode.dataset.categories.indexOf(allCategoryFilters[i].getAttribute('value')) > -1){
            productFound = true;
          }
        }
      }

      if(!productFound){
        allCategoryFilters[i].style.display = 'none';
      }
    }
  });

  let filterByCategory = () => {
    let allLearning = document.querySelector('.np-catalog-courses').children;

    for(let i = 0; i < allLearning.length; i++){
      if(event.target.value == 'Default'){
        allLearning[i].classList.remove('filtered');
        if(!allLearning[i].classList.contains('hidden-by-product')){
          allLearning[i].style.display = 'block';
        }
      } else {
        if(allLearning[i].dataset.categories.indexOf(event.target.value) == -1){
          allLearning[i].classList.add('filtered');
          if(allLearning[i].classList.contains('hidden-by-product')){
            allLearning[i].style.display = 'none';
          }
        } else {
          allLearning[i].classList.remove('filtered');
          if(!allLearning[i].classList.contains('hidden-by-product')){
            allLearning[i].style.display = 'block';
          }
        };
      };
    };

    // This will adjust and recreate the filters with the proper values

    let allProductFiltersEntry = document.querySelectorAll(".product-filter-entry");
    // let allCategoryFiltersEntry = document.querySelectorAll('.category-filter-entry');
    let allFilteredResults = document.querySelector('.np-catalog-courses').children;

    for(let i = 1; i < allProductFiltersEntry.length; i++){
      allProductFiltersEntry[i].style.display = 'block';
    }

    if(event.target.value != 'Default'){
      for(let i = 1; i < allProductFiltersEntry.length; i++){
        let productFound = false;

        for(let j = 0; j < allFilteredResults.length; j++){

          if(allFilteredResults[j].dataset.product){
            if(allFilteredResults[j].dataset.product.indexOf(allProductFiltersEntry[i].getAttribute('value')) > -1){
              if(!allFilteredResults[j].classList.contains('filtered')){
                productFound = true;
              }
            }
          }
        }

        if(!productFound){
          allProductFiltersEntry[i].style.display = 'none';
        }
      }
    }

  // -------------------------------------------------------------------------------------------
    // this section is to update the category filter based on category filter changes
      // commented out because the control of category filter entries should be solely on the product filter

    // for(let i = 1; i < allCategoryFiltersEntry.length; i++){
    //   allCategoryFiltersEntry[i].style.display = 'none';
    // }

    // for(let i = 1; i < allCategoryFiltersEntry.length; i++){
    //   let catFound = false;

    //   for(let j = 0; j < allFilteredResults.length; j++){
    //       if(allFilteredResults[j].dataset.categories){
    //         if(allFilteredResults[j].dataset.categories.indexOf(allCategoryFiltersEntry[i].getAttribute('value')) > -1){
    //           console.log(allCategoryFiltersEntry[i].getAttribute('value'));
    //           catFound = true;

    //           // if(allFilteredResults[j].style.display == 'none'){
    //           //   catFound = true;
    //           // }
    //         }
    //       }
    //   }

    //   if(catFound){
    //     allCategoryFiltersEntry[i].style.display = 'block';
    //   }
    // }

    // Last step is to return cat dropdown to always be all cats on product selection
    // This will prevent cats that shouldnt be present from remaining selected

    // $('#category-filter-dropdown > option:nth-child(1)').text('All Categories');

    // $('#product-filter-dropdown > option:nth-child(1)').attr('selected', true);
    // $('#product-filter-dropdown').val('Default');
  }
</script>
