export const getGuestSpaceId = () => {
  const pathMatch = window.location.pathname.match(/\/guest\/([0-9]+)\//);
  return pathMatch ? pathMatch[1] : undefined;
};

export const createFieldSpan = ({
  code: fieldCode,
  type: fieldType,
  width: fieldWidth,
}) => {
  const container = document.createElement("div");
  if (fieldWidth) {
    container.style.width = `${Number(fieldWidth) - 8}px`;
    container.style.marginLeft = "8px";
  } else {
    container.style.width = "100%";
  }

  const fieldSpan = document.createElement("span");
  fieldSpan.textContent =
    fieldType !== void 0 ? `${fieldCode} (${fieldType})` : fieldCode;
  fieldSpan.style.display = "inline-block";
  fieldSpan.style.width = "100%";
  fieldSpan.style.color = "red";
  fieldSpan.style.overflowWrap = "anywhere";
  fieldSpan.style.whiteSpace = "pre-wrap";

  if (fieldType === "GROUP") {
    fieldSpan.style.marginLeft = "20px";
  }

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

export const createFieldWithTooltips = ({
  code: tooltipCode,
  type: tooltipType,
  width: tooltipWidth,
}) => {
  const container = document.createElement("div");
  container.style.display = "inline-block";

  const fieldSpan = createFieldSpan({
    code: tooltipCode,
    type: tooltipType,
    width: tooltipWidth,
  });

  container.append(fieldSpan);

  return container;
};

export const createFieldLabels = (fieldNames, widths, fieldType) => {
  const labels = fieldNames.map((name, index) => {
    const width = widths[index];
    return createFieldWithTooltips({
      code: name,
      width: index === fieldNames.length - 1 ? width - 1 : width,
    });
  });

  const container = document.createElement("span");

  if (fieldType === "REFERENCE_TABLE") {
    const spacer = document.createElement("span");
    spacer.style.width = "30px";
    spacer.style.display = "inline-block";
    container.appendChild(spacer);
  }

  for (let i = 0; i < labels.length; i++) {
    const label = labels[i];
    container.appendChild(label);
  }

  return container;
};

export const getColumnWidths = (tableElement, fieldType) => {
  const columnWidths = [];
  const headers = tableElement.querySelectorAll("th");

  for (let i = 0; i < headers.length; i++) {
    const header = headers[i];
    columnWidths.push(header.clientWidth);
  }

  return fieldType === "SUBTABLE" ? columnWidths : columnWidths.slice(1);
};