/**
 * AUX Components Audit Page JavaScript
 *
 * Provide interactive functionality for the AUX Components audit page, including:
 * - DataTable initialization for sortable/searchable components table
 * - Expandable/collapsible field details panels
 * - Field property options toggle functionality
 * - Tooltip initialization using the tippy.js library
 *
 * Enqueued by: inc/WP_AUX/Entities/Admin/AuxComponents/AuxComponentsPageEntity.php
 *              (AuxComponentsPageEntity::adminLoad() method)
 *
 * @since 1.0.0
 */

// Initialize DataTable for the components audit table
let componentsTable= new DataTable('#aux-components');

/**
 * Close all open field details panels and remove active states
 *
 * Remove the 'field-active' class from the thickbox window (TB_window) and
 * remove the 'active' class from all field details elements to collapse them.
 *
 * @return {void}
 */
function closeAllFieldsDetails() {
  // Remove active state from thickbox window if it exists
  if (document.getElementById('TB_window')) {
    document.getElementById('TB_window').classList.remove('field-active');
  }

  // Note: Component details iteration is present but empty (reserved for future use)
  let allComponentsDetails = document.getElementsByClassName('component-details');
  if (allComponentsDetails) {
    allComponentsDetails.forEach((fd) => {
    });
  }

  // Close all field details by removing active class
  let allFieldsDetails = document.getElementsByClassName('field-details');
  if (allFieldsDetails) {
    allFieldsDetails.forEach((fd) => {
      fd.classList.remove('active');
    });
  }
}

// Close all field details when component details triggers are clicked
let componentsDetailsTriggers = document.getElementsByClassName('component-details-trigger');
if (componentsDetailsTriggers) {
  componentsDetailsTriggers.forEach((detailsTrigger) => {
    detailsTrigger.addEventListener('click', (e) => {
      closeAllFieldsDetails();
    });
  });
}

// Toggle field property options (type and value) expand/collapse
let fieldOptions = document.querySelectorAll('.field-property-type-options, .field-property-value-options');
if (fieldOptions) {
  fieldOptions.forEach((fieldOption) => {
    fieldOption.addEventListener('click', (e) => {
      let parent = e.target.parentNode;
      let fieldOptionList = e.target.parentNode.getElementsByClassName('field-property-options').item(0);

      // Toggle active class to show/hide the options list
      if (fieldOptionList.classList.contains('active')) {
        fieldOptionList.classList.remove('active');
      } else {
        fieldOptionList.classList.add('active');
      }
    });
  });
}

// Handle field details panel expansion when field headings are clicked
let fieldHeadings = document.getElementsByClassName('field-details-trigger');
if (fieldHeadings) {
  fieldHeadings.forEach((fieldHeading) => {
    fieldHeading.addEventListener('click', (e) => {
      let trigger = e.target.closest('.field-details-trigger');
      let fieldRowNumber = trigger.dataset.fieldRow;

      // Get field row number from data attribute
      if (!fieldRowNumber) {
        fieldRowNumber = trigger.dataset.fieldRow;
      }

      // Find the corresponding field details element
      let fieldDetails = document.getElementById('field-details-' + fieldRowNumber);

      // Close all other field details before opening this one
      closeAllFieldsDetails();

      // Activate the thickbox window and show the selected field details
      document.getElementById('TB_window').classList.add('field-active');
      fieldDetails.classList.add('active');
    });
  });
}

// Initialize tippy.js tooltips for elements with data-tippy-content attribute
tippy('[data-tippy-content]', {
  maxWidth: 'none',      // Allow tooltips to expand to full content width
  interactive: true,     // Enable interaction with tooltip content (e.g., links)
  appendTo: 'parent',    // Append tooltip to parent element instead of body
});
