/**
 * DOM 字段标签操作工具模块
 * 提供用于创建和管理字段标签 DOM 元素的辅助函数
 */

import { FIELD_TYPES } from '../../utils/constants.js';
import { COLORS, SPACING, IS_FIELD_TYPE_DISPLAY } from '../../features/add-field-label/settings.js';

/**
 * 创建带有适当样式的字段标签 span 元素
 * @param {Object} params - 标签参数配置
 * @param {string} params.code - 字段代码
 * @param {string} params.type - 字段类型（可选）
 * @param {number} params.width - 字段宽度（可选）
 * @returns {HTMLElement} 带有样式化 span 的容器 div 元素
 */
const createFieldSpanElement = ({ code, type, width }) => {
  const container = document.createElement('div');

  // 处理宽度和边距设置
  if (width !== undefined) {
    container.style.width = `${Number(width) - SPACING.TABLE_COLUMN_PADDING}px`; // 减去列填充
    container.style.marginLeft = `${SPACING.TABLE_COLUMN_PADDING}px`; // 添加左边距
  } else {
    container.style.width = '100%'; // 默认全宽度
  }

  // 创建和样式化 span 元素
  const fieldSpan = document.createElement('span');
  fieldSpan.textContent = (IS_FIELD_TYPE_DISPLAY && type !== undefined) ? `${code} (${type})` : code; // 显示代码和类型
  fieldSpan.style.display = 'inline-block';
  fieldSpan.style.width = '100%';
  fieldSpan.style.color = COLORS.LABEL_TEXT;  // 使用定义的工具提示文本颜色
  fieldSpan.style.overflowWrap = 'anywhere';   // 支持长文本换行
  fieldSpan.style.whiteSpace = 'pre-wrap';      // 保留空格和换行

  // GROUP 类型字段的特殊样式
  if (type === FIELD_TYPES.GROUP) {
    fieldSpan.style.marginLeft = SPACING.GROUP_MARGIN_LEFT;
  }

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

/**
 * 创建字段标签容器元素
 * @param {Object} params - 标签参数配置
 * @param {string} params.code - 字段代码
 * @param {string} params.type - 字段类型（可选）
 * @param {number} params.width - 容器宽度（可选）
 * @returns {HTMLElement} 标签容器元素
 */
export const createFieldWithLabels = ({ code, type, width }) => {
  const container = document.createElement('div');
  container.style.display = 'inline-block'; // 布局的内联块显示

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

  return container;
};

/**
 * 创建包含多个字段标签的容器
 * @param {Array<string>} fieldNames - 要为其创建标签的字段名称数组
 * @param {Array<number>} widths - 与字段名称对应的宽度
 * @param {string} fieldType - 字段类型（影响间距）
 * @returns {HTMLElement} 带有所有标签的 span 容器元素
 */
export const createFieldLabels = (fieldNames, widths, fieldType, specialSpacing = false) => {
  const container = document.createElement('span');

  // 为引用表字段添加特殊间距
  if (fieldType === FIELD_TYPES.REFERENCE_TABLE && specialSpacing) {
    const spacerElement = document.createElement('span');
    spacerElement.style.width = SPACING.REFERENCE_TABLE_SPACER;
    spacerElement.style.display = 'inline-block';
    container.appendChild(spacerElement);
  }

  // 为每个字段创建标签，调整宽度
  const labelElements = fieldNames.map((fieldName, index) => {
    // 稍稍减少最后一个元素的宽度以适应布局
    const adjustedWidth = index === fieldNames.length - 1
      ? widths[index] - 1
      : widths[index];

    return createFieldWithLabels({
      code: fieldName,
      width: adjustedWidth,
    });
  });

  // 将所有标签元素添加到容器中
  labelElements.forEach(labelElement => container.appendChild(labelElement));

  return container;
};