JSON Formatter

function formatJSON(text, indent) {
  const parsed = JSON.parse(text);
  const space = indent === 'tab'
    ? '\t' : parseInt(indent, 10);
  return JSON.stringify(parsed, null, space);
}

function minifyJSON(text) {
  return JSON.stringify(JSON.parse(text));
}

function validateJSON(text) {
  try {
    JSON.parse(text);
    return { valid: true };
  } catch (e) {
    return { valid: false,
      message: e.message };
  }
}

formatBtn.addEventListener('click', function() {
  try {
    const parsed = JSON.parse(input.value);
    const indent = getIndent();
    rawOutput.textContent =
      JSON.stringify(parsed, null, indent);
    buildTree(parsed);
    clearError();
    switchTab('tree');
  } catch (e) {
    showError(e);
  }
});

minifyBtn.addEventListener('click', function() {
  try {
    const parsed = JSON.parse(input.value);
    rawOutput.textContent = JSON.stringify(parsed);
    buildTree(parsed);
    clearError();
    switchTab('raw');
  } catch (e) { showError(e); }
});

function buildTree(value, depth) {
  var t = typeof value;
  if (value === null) {
    return el('span', 'jf-tree-null', 'null');
  }
  if (t === 'string') {
    return el('span', 'jf-tree-string',
      '"' + value + '"');
  }
  if (t === 'number') {
    return el('span', 'jf-tree-number',
      String(value));
  }
  if (t === 'boolean') {
    return el('span', 'jf-tree-boolean',
      String(value));
  }

  // Object or Array
  var isArr = Array.isArray(value);
  var keys = isArr ? null : Object.keys(value);
  var len = isArr ? value.length : keys.length;

  if (len === 0) {
    return el('span', 'jf-tree-bracket',
      isArr ? '[]' : '{}');
  }

  var wrap = document.createElement('span');
  wrap.style.display = 'block';

  var icon = el('span',
    'jf-tree-toggle-icon', '\u25bc');
  var bracketOpen = el('span',
    'jf-tree-bracket', isArr ? '[' : '{');
  var toggle = document.createElement('span');
  toggle.className = 'jf-tree-toggle';
  toggle.appendChild(icon);
  toggle.appendChild(bracketOpen);

  var children = document.createElement('div');
  children.className = 'jf-tree-children';

  // ... render children recursively ...

  toggle.addEventListener('click', function(e) {
    e.stopPropagation();
    var hidden =
      children.style.display === 'none';
    children.style.display =
      hidden ? '' : 'none';
    icon.textContent =
      hidden ? '\u25bc' : '\u25b6';
    icon.classList.toggle('collapsed', !hidden);
  });

  wrap.appendChild(toggle);
  wrap.appendChild(children);
  wrap.appendChild(el('span', 'jf-tree-bracket',
    isArr ? ']' : '}'));
  return wrap;
}

function switchTab(name) {
  document.querySelectorAll('.jf-tab')
    .forEach(function(t) {
      t.classList.toggle('active',
        t.dataset.tab === name);
    });
  document.querySelectorAll('.jf-panel')
    .forEach(function(p) {
      p.classList.toggle('active',
        p.id === 'jf' + name.charAt(0)
          .toUpperCase() + name.slice(1) + 'Panel');
    });
}

document.querySelectorAll('.jf-tab')
  .forEach(function(tab) {
    tab.addEventListener('click', function() {
      switchTab(this.dataset.tab);
    });
  });

function fallbackCopy(text) {
  var ta = document.createElement('textarea');
  ta.value = text;
  ta.style.position = 'fixed';
  ta.style.left = '-9999px';
  document.body.appendChild(ta);
  ta.select();
  try {
    document.execCommand('copy');
  } catch (e) {}
  ta.remove();
}

function downloadJSON(text) {
  var blob = new Blob([text],
    { type: 'application/json' });
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.href = url;
  a.download = 'formatted.json';
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

var previewTimer;
input.addEventListener('input', function() {
  clearTimeout(previewTimer);
  previewTimer = setTimeout(function() {
    var text = input.value.trim();
    if (!text) return;
    try {
      var parsed = JSON.parse(text);
      var indent = getIndent();
      rawOutput.textContent =
        JSON.stringify(parsed, null, indent);
      buildTree(parsed);
      clearError();
    } catch (e) {
      // Live preview hides errors silently
    }
  }, 300);
});