const STORAGE_KEY = 'stundenfuchs:settingsSection';
const DESKTOP_SYNC_MEDIA_QUERY = '(min-width: 51.26em)';

function shouldSyncGroups() {
  return window.matchMedia(DESKTOP_SYNC_MEDIA_QUERY).matches;
}

function syncGroupState(section, isOpen) {
  const groupName = section.dataset.syncGroup || '';
  if (!groupName || !shouldSyncGroups()) {
    return;
  }

  document.querySelectorAll(`[data-component="settings-section"][data-sync-group="${groupName}"]`).forEach((peer) => {
    if (peer instanceof HTMLDetailsElement && peer !== section) {
      peer.open = isOpen;
    }
  });
}

function openSectionById(sectionId) {
  if (!sectionId) {
    return;
  }
  const target = document.getElementById(sectionId);
  if (!(target instanceof HTMLDetailsElement)) {
    return;
  }
  target.open = true;
  syncGroupState(target, true);
}

export function initSettingsSections() {
  const sections = Array.from(document.querySelectorAll('[data-component="settings-section"]'));
  if (sections.length === 0) {
    return;
  }

  const hashTarget = window.location.hash ? window.location.hash.slice(1) : '';
  const storedTarget = window.sessionStorage.getItem(STORAGE_KEY) || '';
  openSectionById(hashTarget || storedTarget);
  if (storedTarget) {
    window.sessionStorage.removeItem(STORAGE_KEY);
  }

  sections.forEach((section) => {
    if (!(section instanceof HTMLDetailsElement) || !section.id) {
      return;
    }
    section.addEventListener('toggle', () => {
      syncGroupState(section, section.open);
    });
    section.querySelectorAll('form').forEach((form) => {
      form.addEventListener('submit', () => {
        window.sessionStorage.setItem(STORAGE_KEY, section.id);
      });
    });
  });
}