export const buildUrl = (appBase, path) => new URL(path, appBase).toString();

export const getAppBase = () => {
  const baseEl = document.querySelector('base');
  if (baseEl && baseEl.href) {
    return baseEl.href;
  }
  return `${window.location.origin}/`;
};

export const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;'
}[char]));

export const buildBadgeList = (items, options = {}) => {
  const {
    variant = 'neutral',
    primaryVariant = 'info',
    primaryTooltip = ''
  } = options;

  let list = items;
  let primary = '';
  if (items && typeof items === 'object' && !Array.isArray(items)) {
    list = Array.isArray(items.items) ? items.items : [];
    primary = String(items.primary ?? '');
  }
  if (!Array.isArray(list) || list.length === 0) {return '';}

  const tooltipAttr = primaryTooltip
    ? ` data-tooltip="${escapeHtml(primaryTooltip)}" data-tooltip-pos="top"`
    : '';

  const badges = list.map((label) => {
    const labelText = String(label ?? '');
    const isPrimary = primary !== '' && labelText === primary;
    const badgeVariant = isPrimary ? primaryVariant : variant;
    const badgeTooltip = isPrimary && primaryTooltip ? tooltipAttr : '';
    return `<span class="badge" data-variant="${badgeVariant}"${badgeTooltip}>${escapeHtml(labelText)}</span>`;
  }).join(' ');

  return `<div class="badge-list">${badges}</div>`;
};

export const postAction = async (url, csrf, data = {}) => {
  const body = new URLSearchParams({ ...data, [csrf.key]: csrf.token });
  return fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/json',
      'X-Requested-With': 'fetch'
    },
    body
  });
};

export const badgeHtml = (gridjs, value = '') => {
  const safe = value ?? '';
  return gridjs.html(`<span class="badge" data-variant="neutral">${safe}</span>`);
};