/*
 * Unoptimized Event Listener Example
 * Demonstrates the rapid firing of a function without debouncing or throttling.
 */

// Get a reference to the output element
const outputElement = document.getElementById('output');
let count = 0;

// Function to simulate a costly operation
function logEvent() {
  count++;
  const message = `Event fired: ${count} times at ${new Date().toLocaleTimeString()}`; 
  console.log(message);
  if (outputElement) {
    outputElement.innerHTML += `<p>${message}</p>`;
    // Scroll to the bottom to see new messages
    outputElement.scrollTop = outputElement.scrollHeight;
  }
}

// Attach a 'mousemove' event listener directly
// This will fire 'logEvent' every time the mouse moves even a single pixel
document.addEventListener('mousemove', logEvent);

/*
 * To run this code:
 * 1. Create an HTML file (e.g., index.html).
 * 2. Add a div with id='output' to display messages:
 *    <div id="output" style="height: 200px; overflow-y: scroll; border: 1px solid #ccc;"></div>
 * 3. Include this JavaScript in a <script> tag or a linked .js file.
 * 4. Open index.html in your browser and move your mouse over the page.
 *    Observe the console and the output div for a flood of messages.
 */

/*
 * Debounce Function Implementation
 * Ensures a function is called only after a specified period of inactivity.
 */

// Get references to elements for demonstration
const debouncedOutput = document.getElementById('debouncedOutput');
const searchInput = document.getElementById('searchInput');
let debounceCount = 0;

/**
 * A generic debounce function.
 * @param {Function} func - The function to debounce.
 * @param {number} delay - The delay in milliseconds after which `func` will be called.
 * @returns {Function} - The debounced version of `func`.
 */
function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    const context = this; // Preserve 'this' context
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(context, args), delay);
  };
}

// The actual function we want to debounce (e.g., a search handler)
function performSearch(query) {
  debounceCount++;
  const message = `Searching for: '${query}' (Called ${debounceCount} times)`;
  console.log(message);
  if (debouncedOutput) {
    debouncedOutput.innerHTML += `<p>${message}</p>`;
    debouncedOutput.scrollTop = debouncedOutput.scrollHeight;
  }
}

// Create a debounced version of performSearch with a 500ms delay
const debouncedSearch = debounce(performSearch, 500);

// Attach the debounced function to the input event
if (searchInput) {
  searchInput.addEventListener('input', (event) => {
    debouncedSearch(event.target.value);
  });
}

/*
 * To run this code:
 * 1. Create an HTML file (e.g., index.html).
 * 2. Add an input field and a div for output:
 *    <input type="text" id="searchInput" placeholder="Type to search...">
 *    <div id="debouncedOutput" style="height: 150px; overflow-y: scroll; border: 1px solid #ccc; margin-top: 10px;"></div>
 * 3. Include this JavaScript in a <script> tag or a linked .js file.
 * 4. Open index.html, type rapidly in the input field, then pause.
 *    Observe that 'performSearch' only fires after you stop typing for 500ms.
 */

/*
 * Throttle Function Implementation
 * Ensures a function is called at most once within a specified time frame.
 */

// Get references to elements for demonstration
const throttledOutput = document.getElementById('throttledOutput');
let throttleCount = 0;

/**
 * A generic throttle function.
 * @param {Function} func - The function to throttle.
 * @param {number} delay - The minimum delay in milliseconds between calls to `func`.
 * @returns {Function} - The throttled version of `func`.
 */
function throttle(func, delay) {
  let timeoutId = null;
  let lastArgs = null;
  let lastContext = null;
  let lastRan = 0;

  const throttled = function(...args) {
    const now = Date.now();
    lastArgs = args;
    lastContext = this;

    if (now - lastRan >= delay) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      lastRan = now;
      func.apply(lastContext, lastArgs);
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {
        lastRan = Date.now();
        timeoutId = null;
        func.apply(lastContext, lastArgs);
      }, delay - (now - lastRan));
    }
  };

  // Optional: A way to cancel any pending trailing call
  throttled.cancel = () => {
    clearTimeout(timeoutId);
    timeoutId = null;
  };

  return throttled;
}

// The actual function we want to throttle (e.g., a scroll handler)
function handleScroll() {
  throttleCount++;
  const message = `Scroll event handled: ${throttleCount} times at ${new Date().toLocaleTimeString()}`; 
  console.log(message);
  if (throttledOutput) {
    throttledOutput.innerHTML = `<p>${message}</p>`; // Overwrite for scroll
  }
}

// Create a throttled version of handleScroll with a 200ms delay
const throttledScroll = throttle(handleScroll, 200);

// Attach the throttled function to the scroll event
document.addEventListener('scroll', throttledScroll);

/*
 * To run this code:
 * 1. Create an HTML file (e.g., index.html).
 * 2. Add a div with enough content to make it scrollable and a div for output:
 *    <div style="height: 1000px; background-color: lightblue;">Scroll down to see throttling in action!</div>
 *    <div id="throttledOutput" style="position: fixed; top: 10px; right: 10px; background-color: white; padding: 10px; border: 1px solid #ccc;"></div>
 * 3. Include this JavaScript in a <script> tag or a linked .js file.
 * 4. Open index.html and scroll rapidly.
 *    Observe 'handleScroll' fires at most every 200ms, not on every pixel scroll.
 */

/*
 * Advanced Debounce/Throttle Considerations and Best Practices
 * Demonstrates context preservation and introduces library usage (conceptually).
 */

// Example: Preserving 'this' context
class MyComponent {
  constructor() {
    this.value = 0;
    this.element = document.getElementById('contextDemo');
    if (this.element) {
      this.element.addEventListener('click', this.debouncedClickHandler());
    }
  }

  // Method that needs 'this' context
  handleClick() {
    this.value++;
    const message = `Component clicked: ${this.value}`; 
    console.log(message);
    if (this.element) {
        this.element.innerHTML = `<p>${message}</p>`;
    }
  }

  // Returns a debounced version of handleClick, preserving 'this'
  debouncedClickHandler() {
    // Re-using the 'debounce' function from Content Part 2
    // Ensure debounce function is available in scope or imported
    if (typeof debounce !== 'function') {
        console.error('Debounce function not found. Please ensure it is defined.');
        return () => {}; // Return a no-op function to prevent errors
    }
    return debounce(this.handleClick, 500);
  }
}

// Instantiate the component
const component = new MyComponent();

/*
 * To run this code:
 * 1. Ensure the 'debounce' function from Content Part 2 is defined in your script.
 * 2. Create an HTML file (e.g., index.html).
 * 3. Add a button or div for demonstration:
 *    <button id="contextDemo" style="margin-top: 20px;">Click Me (Debounced)</button>
 * 4. Include this JavaScript in a <script> tag or a linked .js file.
 * 5. Open index.html and click the button rapidly.
 *    Observe that 'handleClick' logs 'this.value' correctly and only after inactivity.
 *
 * --- Lodash Integration (Conceptual) ---
 * For robust production applications, we advocate for battle-tested libraries.
 * Lodash provides highly optimized and feature-rich debounce and throttle functions.
 * 
 * // Example using Lodash (requires installing and importing Lodash)
 * // import { debounce, throttle } from 'lodash';
 * 
 * // const debouncedSearch = debounce(performSearch, 500);
 * // const throttledScroll = throttle(handleScroll, 200);
 * 
 * // Lodash's functions handle 'this' context and additional options like 'leading'/'trailing' edges by default.
 */