/**
 * Sets up the DOM structure for the canvas.
 *
 * @param {HTMLElement} canvas - The canvas element to be inserted into the DOM.
 */
export default function setupDom(canvas, groot) {
  document.body.addEventListener('contextmenu', (e) => e.preventDefault());

  const content = document.createElement('div');
  content.classList.add('content');
  document.body.appendChild(content);
  const container = document.createElement('div');
  container.classList.add('canvas-wrapper');
  content.appendChild(container);
  canvas.classList.add('webgl');
  container.appendChild(canvas);

  groot && groot.appendChild(container);
  groot && content.appendChild(groot);

  const spacer = document.createElement('div');
  spacer.classList.add('spacer');
  document.body.appendChild(spacer);

  // trick FairyGUI Stage styles
  enableTouchScroll();
}

export function enableTouchScroll(selector = 'body') {
  const el = document.querySelector(selector);
  if (el) {
    el.style.setProperty('touch-action', 'auto', 'important');
  }

  // Delete global * { touch-action: none }
  [...document.styleSheets].forEach((sheet) => {
    try {
      [...sheet.cssRules].forEach((rule, index) => {
        if (rule.selectorText === '*' && rule.cssText.includes('touch-action')) {
          sheet.deleteRule(index);
        }
      });
    } catch (e) {
      // Ignore errors if CORS
    }
  });
}

export function disableTouchScroll(selector = 'body') {
  const el = document.querySelector(selector);
  if (el) {
    el.style.setProperty('touch-action', 'none', 'important');
  }
}