/**
 * Tracks settings page interactions for telemetry.
 */
import { resolveHost } from '../core/app-dom.js';
import { syncControlState } from '../core/app-conditional-controls.js';

export const initTelemetrySettings = (root = document, options = {}) => {
  const host = resolveHost(root);
  const toggleSelector = String(options.toggleSelector || '[data-telemetry-enabled-toggle]').trim() || '[data-telemetry-enabled-toggle]';
  const samplingFieldsetSelector = String(options.samplingFieldsetSelector || '[data-telemetry-sampling-fieldset]').trim() || '[data-telemetry-sampling-fieldset]';
  const samplingRowSelector = String(options.samplingRowSelector || '[data-telemetry-sampling-row]').trim() || '[data-telemetry-sampling-row]';

  const toggle = host.querySelector(toggleSelector);
  const samplingFieldset = host.querySelector(samplingFieldsetSelector);
  const samplingRow = host.querySelector(samplingRowSelector);

  if (!toggle || !samplingFieldset) {
    return { destroy: () => {} };
  }

  const syncSamplingVisibility = () => {
    const active = Boolean(toggle.checked);
    syncControlState(samplingFieldset, active);
    if (samplingRow instanceof HTMLElement) {
      samplingRow.hidden = !active;
    }
  };

  toggle.addEventListener('change', syncSamplingVisibility);
  syncSamplingVisibility();
  return {
    destroy: () => {
      toggle.removeEventListener('change', syncSamplingVisibility);
    },
  };
};