<div class="np-filter product-filter-container">
  <div class="dropdown">
    <select
      class="product-filter-dropdown np-input"
      type="text"
      name="product-filter-dropdown"
      id="product-filter-dropdown"
      onchange="filterByProduct()"
    >
      <option class="product-filter-entry" value="Default" selected>All Products</option>
    </select>
  </div>
</div>

<script>
  let allProductTypesHome = ['Anthology-Default'];
  let allProductTypesDash = ['Anthology-Default'];
  let productFilterEl = document.querySelector("#product-filter-dropdown");

  {% for course in courses.enrolled %}
    {% if course.progress == 0 or course.properties.most_popular == true %}
      if('{{ course.properties.product_names_for_course_cards }}' != 'Anthology [Catch-all]'){
        if(!allProductTypesHome.includes('{{ course.properties.product_names_for_course_cards }}')){
          allProductTypesHome.push("{{ course.properties.product_names_for_course_cards }}");
        }
      }
    {% endif %}
  {% endfor %}

  {% for course in courses.enrolled %}
    {% unless course.progress == 0 %}
      if('{{ course.properties.product_names_for_course_cards }}' != 'Anthology [Catch-all]'){
        if(!allProductTypesDash.includes('{{ course.properties.product_names_for_course_cards }}')){
          allProductTypesDash.push("{{ course.properties.product_names_for_course_cards }}");
        }
      }
    {% endunless %}
  {% endfor %}

  allProductTypesHome = allProductTypesHome.sort();
  allProductTypesDash = allProductTypesDash.sort();

  {% if page == 'Homepage' or page == 'Search' %}
    if(allProductTypesHome.length > 1){
      allProductTypesHome.map((product) => {
        if(product != 'Anthology-Default'){
          if(product.indexOf('&amp;') > -1){
            product = product.replaceAll('&amp;', '&');
          }
          let productOption = document.createElement('option');
          productOption.classList.add('product-filter-entry');
          productOption.setAttribute('value', product);
          //productionOption.setAttribute('href', `/search/23777883-6b85-449d-8d25-2e548c6e9ecc?q=${product}`);
          productOption.innerHTML = `${product}`;
          productFilterEl.appendChild(productOption);
        }
      })
    } else {
      productFilterEl.style.display = 'none';
    }

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

      for(let i = 0; i < allLearning.length; i++){
        if(event.target.value == 'Default'){
          // if(!allLearning[i].classList.contains('hidden-by-search')){
          //   allLearning[i].style.display = 'block';
          // } 

          allLearning[i].style.display = 'block';
          allLearning[i].classList.remove('hidden-by-product');
          allLearning[i].classList.remove('filtered');
        } else {
          if(allLearning[i].dataset.product != event.target.value){
            allLearning[i].style.display = 'none';
            allLearning[i].classList. add('hidden-by-product');
            allLearning[i].classList.add('filtered');
          } else {
            // if(!allLearning[i].classList.contains('hidden-by-search')){
            //   allLearning[i].style.display = 'block';
            // }
            allLearning[i].style.display = 'block';
            allLearning[i].classList.remove('hidden-by-product');
            allLearning[i].classList.remove('filtered');
          };
      };

      console.log($("#product-filter-dropdown > option:selected").text());



      let allCategoryFiltersProduct = document.querySelectorAll('.category-filter-entry');
      let allSearchedResultsProduct = document.querySelectorAll('.course-card');

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

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

          if(allSearchedResultsProduct[j].dataset.categories.indexOf(allCategoryFiltersProduct[i].getAttribute('value')) > -1){
            if(allSearchedResultsProduct[j].style.display == 'block'){
              catFound = true;
            }
          }
        }

        if(!catFound){
          allCategoryFiltersProduct[i].style.display = 'none';
        } else {
          allCategoryFiltersProduct[i].style.display = 'block';
        }

        $('#category-filter-dropdown > option:nth-child(1)').attr('selected', true);

        // 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');
        $('#category-filter-dropdown').val('Default');
      }
    };
  }
  {% elsif page == 'Dashboard' %}
    if(allProductTypesDash.length > 1){
      allProductTypesDash.map((product) => {
        if(product != 'Anthology-Default'){
          if(product.indexOf('&amp;') > -1){
            product = product.replace('&amp;', '&');
          }
          let productOption = document.createElement('option');
          productOption.classList.add('product-filter-entry');
          productOption.setAttribute('value', product)
          productOption.innerHTML = `${product}`;

          productFilterEl.appendChild(productOption);
        }
      })
    } else {
      productFilterEl.style.display = 'none';
      document.querySelector('.view-swapper-container').style.marginBottom = '0';
    }

    let filterByProduct = () => {
      let inProgressCourses = document.querySelector('.courses-in-prog').children;
      let completedCourses = document.querySelector('.courses-completed').children;

      for(let i = 0; i < inProgressCourses.length; i++){
        if(event.target.value == 'Default'){
          inProgressCourses[i].style.display = 'block';
        } else {
          if(inProgressCourses[i].dataset.product != event.target.value){
            inProgressCourses[i].style.display = 'none';
          } else {
            inProgressCourses[i].style.display = 'block';
          }
        }
      }

      for(let i = 0; i < completedCourses.length; i++){
        if(event.target.value == 'Default'){
          completedCourses[i].style.display = 'block';
        } else {
          if(completedCourses[i].dataset.product != event.target.value){
            completedCourses[i].style.display = 'none';
          } else {
            completedCourses[i].style.display = 'block';
          }
        }
      }
    }
  {% endif %}
</script>

<style>
  .filtered{
    display: none !important;
  }
</style>