// Function to generate random text
function generateRandomText(length) {
  const chars =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let result = "";
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

// CSS Version
document.getElementById("populateCss").addEventListener("click", () => {
  const container = document.getElementById("cssContainer");
  container.innerHTML = ""; // Clear existing content
  performance.mark("cssStart");
  for (let i = 0; i < 1000; i++) {
    const accordionHtml = `                
                      <div class="css-accordion">
                        <input type="checkbox" id="css-acc-${i}">
                        <label for="css-acc-${i}">Item ${i + 1}</label>
                        <div class="content">
                            <p>${generateRandomText(20)}</p>
                        </div>
                    </div>
                `;
    container.innerHTML += accordionHtml;
  }
  performance.mark("cssEnd");
  performance.measure("cssPopulation", "cssStart", "cssEnd");
  console.log(
    "CSS Population Time:",
    performance.getEntriesByName("cssPopulation")[0].duration
  );
});

// JavaScript Version
document.getElementById("populateJs").addEventListener("click", () => {
  const container = document.getElementById("jsContainer");
  container.innerHTML = ""; // Clear existing content
  performance.mark("jsStart");
  for (let i = 0; i < 1000; i++) {
    const accordionHtml = `
                    <div class="js-accordion">
                        <div class="header">Item ${i + 1}</div>
                        <div class="content" style="display: none;">
                            <p>${generateRandomText(20)}</p>
                        </div>
                    </div>
                `;
    container.innerHTML += accordionHtml;
  }
  // Add event listeners to all accordions
  document.querySelectorAll(".js-accordion .header").forEach((header) => {
    header.addEventListener("click", () => {
      const content = header.nextElementSibling;
      content.style.display =
        content.style.display === "none" ? "block" : "none";
    });
  });
  performance.mark("jsEnd");
  performance.measure("jsPopulation", "jsStart", "jsEnd");
  console.log(
    "JS Population Time:",
    performance.getEntriesByName("jsPopulation")[0].duration
  );
});