import { COLORS, SPACING, FIELD_TYPES } from './constants.js';

/**
 * Extracts the guest space ID from the current URL
 * @returns {string|undefined} Guest space ID or undefined if not found
 */
export const getGuestSpaceId = () => {
  const match = window.location.pathname.match(/\/guest\/([0-9]+)\//);
  return match ? match[1] : undefined;
};

/**
 * Creates a field span element with proper styling
 * @param {Object} params - Parameters for the span
 * @param {string} params.code - Field code
 * @param {string} params.type - Field type
 * @param {number} params.width - Field width (optional)
 * @returns {HTMLElement} Container div with span
 */
const createFieldSpan = ({ code, type, width }) => {
  const container = document.createElement('div');

  // Handle width and margin
  if (width !== undefined) {
    container.style.width = `${Number(width) - 8}px`;
    container.style.marginLeft = '8px';
  } else {
    container.style.width = '100%';
  }

  // Create and style the span element
  const fieldSpan = document.createElement('span');
  fieldSpan.textContent = type !== undefined ? `${code} (${type})` : code;
  fieldSpan.style.display = 'inline-block';
  fieldSpan.style.width = '100%';
  fieldSpan.style.color = COLORS.TOOLTIP_TEXT;
  fieldSpan.style.overflowWrap = 'anywhere';
  fieldSpan.style.whiteSpace = 'pre-wrap';

  // Special styling for GROUP type fields
  if (type === FIELD_TYPES.GROUP) {
    fieldSpan.style.marginLeft = SPACING.GROUP_MARGIN_LEFT;
  }

  container.appendChild(fieldSpan);
  return container;
};

/**
 * Creates a label container element
 * @param {Object} params - Parameters for the label
 * @param {string} params.code - Field code for label
 * @param {string} params.type - Field type for label
 * @param {number} params.width - Width for label container
 * @returns {HTMLElement} Container with field span
 */
export const createFieldWithLabels = ({ code, type, width }) => {
  const container = document.createElement('div');
  container.style.display = 'inline-block';

  const fieldSpan = createFieldSpan({ code, type, width });
  container.appendChild(fieldSpan);

  return container;
};

/**
 * Creates a container with multiple field labels
 * @param {Array} fieldNames - Names of fields to create labels for
 * @param {Array} widths - Widths corresponding to field names
 * @param {string} fieldType - Type of the field (affects spacing)
 * @returns {HTMLElement} Span container with all labels
 */
export const createFieldLabels = (fieldNames, widths, fieldType) => {
  const container = document.createElement('span');

  // Add spacer for reference table fields
  if (fieldType === FIELD_TYPES.REFERENCE_TABLE) {
    const spacer = document.createElement('span');
    spacer.style.width = SPACING.REFERENCE_TABLE_SPACER;
    spacer.style.display = 'inline-block';
    container.appendChild(spacer);
  }

  // Create label elements with adjusted widths
  const labels = fieldNames.map((name, index) => {
    const adjustedWidth = index === fieldNames.length - 1 ? widths[index] - 1 : widths[index];
    return createFieldWithLabels({
      code: name,
      width: adjustedWidth,
    });
  });

  // Append all labels to container
  labels.forEach(label => container.appendChild(label));

  return container;
};

/**
 * Extracts column widths from table headers
 * @param {HTMLElement} tableElement - Table element to analyze
 * @param {string} fieldType - Type of field (affects returned widths)
 * @returns {Array} Array of column widths
 */
export const getColumnWidths = (tableElement, fieldType) => {
  const headers = Array.from(tableElement.querySelectorAll('th'));
  const widths = headers.map(header => header.clientWidth);

  // For subtables include all widths, for others skip first column
  return fieldType === FIELD_TYPES.SUBTABLE ? widths : widths.slice(1);
};