<%# functions used to show the list of rules at the bottom of the report %>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    document.getElementById('mustFixSelector').click();
    document.getElementById('issueDescriptionsButton').click();
    // document.getElementById('mustFixDropdownSelector').click();
  });

  const changeSelectedCategory = (() => {
    let selected = null;
    return (event, category) => {
      if (selected) {
        selected.classList.remove('selected');
      }
      event.currentTarget.classList.add('selected');
      document
        .getElementById('categorySummary')
        .setAttribute('aria-label', `${getFormattedCategoryTitle(category)} summary`);
      selected = event.currentTarget;
      window.currentCategory = structuredClone(category);

      // Ensures <category>DropdownSelector on mobile view matches
      const matchingDropdownId = category + 'DropdownSelector';
      document.getElementById(matchingDropdownId).click();
      loadRulesSummary(category, searchInput);
    };
  })();

  function loadRulesSummary(category, searchVal) {
    const newItems = [];
    window.filteredItems = structuredClone(scanItems);
    if (document.getElementById('searchBarInput').value.trim() !== '') {
      for (let category in filteredItems) {
        handleSearch(category, searchVal, filteredItems);
      }
    } else {
      resetIssueOccurrence(filteredItems);
    }

    const formatItemsCount = count => {
      if (count < 1000) return `${count}`;
      if (count >= 9000) return '>9k';
      return `${Math.floor(count / 1000)}k`;
    };

    if (filteredItems[category].rules.length === 0) {
      const emptyMessage = generateEmptyCategoryMessage(category);
      document.getElementById('categorySummary').replaceChildren(emptyMessage);
      return;
    }

    filteredItems[category].rules.forEach((rule, index) => {
      const buttonAriaLabel = `${rule.description}, ${rule.totalItems} occurrences`;
      const oobeeAiSvgId = `${category}-${rule.rule}-${index}`;
      const isPurpleAiRule = oobeeAiRules.includes(rule.rule);

      // START new createElementFromString
      const ruleItem = createElementFromString(`
        <li>
          <button
            aria-label="${buttonAriaLabel}"
            class="rule-item"
            data-bs-toggle="modal"
            data-bs-target="#expandedRule"
            aria-controls="expandedRule"
            onclick="OffCanvasSearchWarning()"
              ${
                isPurpleAiRule
                  ? `aria-describedby="containsAISuggestions"
                  onfocus="document.getElementById('${oobeeAiSvgId}').dispatchEvent(new MouseEvent('mouseover'))"
                  onblur="document.getElementById('${oobeeAiSvgId}').dispatchEvent(new MouseEvent('mouseout'))"
                  onmousedown="event.preventDefault()"`
                  : ``
              }
          >

          <div
            class="rule-items-count ${category}">
            ${formatItemsCount(rule.totalItems)}
          </div>

          <div class="rule-item-description">
            ${htmlEscapeString(rule.description)}
            ${
              isPurpleAiRule
                ? `<svg id="${oobeeAiSvgId}"
                tabindex="-1" class="ai-tooltip"
                title="Contains AI suggestions." data-bs-toggle="tooltip" data-bs-placement="top"
                width="16" height="16" viewBox="0 0 16 16" data-bs-toggle="tooltip" data-bs-placement="top" title="Contains AI suggestions." fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left:9px" aria-label="Contains AI suggestions.">
                <path d="M7.72981 3.34063C6.9595 2.57003 6.43225 1.22438 6.1706 0C5.90853 1.22462 5.38185 2.57056 4.61125 3.34116C3.84094 4.11122 2.49488 4.63847 1.27075 4.90066C2.49538 5.16231 3.84119 5.68925 4.6115 6.45988C5.38181 7.23019 5.90906 8.57613 6.17113 9.8005C6.43278 8.57588 6.95988 7.22994 7.73006 6.45934C8.50038 5.68903 9.84644 5.16203 11.0706 4.89984C9.84622 4.63819 8.50041 4.11097 7.72981 3.34063Z" fill="#9021a6"></path>
                <path d="M12.7335 9.5106C12.2737 9.05057 11.9582 8.24622 11.8018 7.51485C11.6453 8.24622 11.3308 9.05053 10.8705 9.51085C10.4102 9.97066 9.60601 10.2859 8.87476 10.4425C9.60626 10.599 10.4102 10.9138 10.8705 11.3741C11.3308 11.8341 11.6458 12.6384 11.8024 13.3698C11.9587 12.6382 12.2737 11.8341 12.7337 11.3738C13.1938 10.9138 13.9981 10.5988 14.7292 10.4419C13.9981 10.2856 13.1938 9.97066 12.7335 9.5106Z" fill="#9021a6"></path>
                <path d="M4.57346 11.0844C4.44199 11.6984 4.17799 12.3739 3.79162 12.7603C3.4053 13.1463 2.73012 13.4109 2.11621 13.5423C2.73012 13.6741 3.4053 13.9378 3.79162 14.3244C4.17799 14.7108 4.44252 15.3857 4.57399 16C4.70534 15.3857 4.96946 14.7108 5.35596 14.3242C5.74202 13.9379 6.41734 13.6736 7.03112 13.5418C6.41737 13.4106 5.74202 13.1463 5.35571 12.76C4.96946 12.3739 4.7048 11.6985 4.57346 11.0844Z" fill="#9021a6"></path>
              </svg>`
                : ``
            }
          </div>

          <div>
            <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.03847 16C0.833084 16 0.632306 15.9388 0.461529 15.8241C0.290753 15.7095 0.157649 15.5465 0.0790493 15.3558C0.000449621 15.1651 -0.0201154 14.9553 0.0199549 14.7529C0.0600251 14.5505 0.158931 14.3645 0.304165 14.2186L6.49293 7.99975L0.304165 1.78088C0.109639 1.58514 0.000422347 1.31979 0.000518839 1.04315C0.000615331 0.766523 0.110018 0.501248 0.30468 0.30564C0.499341 0.110032 0.763331 9.70251e-05 1.03862 6.41929e-08C1.31392 -9.68968e-05 1.57798 0.109652 1.77278 0.305123L8.69586 7.26187C8.8906 7.45757 9 7.72299 9 7.99975C9 8.2765 8.8906 8.54192 8.69586 8.73763L1.77278 15.6944C1.67646 15.7914 1.562 15.8684 1.43598 15.9208C1.30996 15.9733 1.17487 16.0002 1.03847 16Z" fill="#26241b"/>
            </svg>
          </div>
          </button>
        </li>
      `);
      // END new createElementFromString

      ruleItem.addEventListener('click', () => expandRule(category, rule));
      newItems.push(ruleItem);
    });

    document.getElementById('categorySummary').replaceChildren(...newItems);

    initTooltips();
  }

  function generateEmptyCategoryMessage(category) {
    const messageContainer = createElementFromString(
      '<li id="empty-category-summary-section"></li>',
    );

    let message;
    if (category === 'passed') {
      message = createElementFromString('<p>There are no passed occurrences here.</p>');
    } else if (filteredItems.mustFix.totalItems === 0 && filteredItems.goodToFix.totalItems === 0) {
      message = createElementFromString(
        '<p id="no-issues-message">Good job! There are no issues here.</p>',
      );
    } else if (category === 'mustFix') {
      message = createElementFromString(
        `<p>There are no issues here but there are still ${filteredItems.goodToFix.rules.length} Good to Fix issues to review.</p>`,
      );
    } else {
      message = createElementFromString(
        `<p>There are no issues here but there are still ${filteredItems.mustFix.rules.length} Must Fix issues to review.</p>`,
      );
    }
    messageContainer.appendChild(message);
    return messageContainer;
  }
</script>
