import { computed } from 'vue';
import { getCurrentLanguage } from '@/locales';

/**
 * 表单配置hooks
 * 提供响应式的表单配置，根据当前语言自动调整
 * @param {Object} options - 配置选项
 * @param {string} options.zhWidth - 中文标签宽度，默认 '120px'
 * @param {string} options.enWidth - 英文标签宽度，默认 '160px'
 * @param {Object} options.customWidths - 自定义宽度配置 { zh: '100px', en: '140px' }
 * @param {Object} options.spacing - 表单项间距配置 { zh: '20px', en: '24px' }
 * @param {string} options.defaultButtonSize - 按钮尺寸，默认 'default'
 * @param {Object} options.fontSize - 字体大小配置 { zh: '14px', en: '13px' }
 */
export function useFormConfig(options = {}) {
  // 解构配置选项，提供默认值
  const {
    zhWidth = '120px',
    enWidth = '160px',
    customWidths = null,
    spacing = { zh: '20px', en: '24px' },
    defaultButtonSize = 'default',
    fontSize = { zh: '14px', en: '13px' },
  } = options;

  // 根据当前语言计算表单标签宽度
  const formLabelWidth = computed(() => {
    // 如果提供了自定义宽度配置，优先使用
    if (customWidths) {
      return getCurrentLanguage() === 'en-US' ? customWidths.en : customWidths.zh;
    }

    // 使用传入的宽度配置或默认值
    return getCurrentLanguage() === 'en-US' ? enWidth : zhWidth;
  });

  // 根据当前语言计算表单项间距
  const formItemSpacing = computed(() => {
    return getCurrentLanguage() === 'en-US' ? spacing.en : spacing.zh;
  });

  // 根据当前语言计算按钮尺寸
  const buttonSize = computed(() => {
    return defaultButtonSize;
  });

  // 根据当前语言计算输入框占位符的样式
  const inputPlaceholderStyle = computed(() => {
    return {
      fontSize: getCurrentLanguage() === 'en-US' ? fontSize.en : fontSize.zh,
    };
  });

  // 表单验证消息的样式配置
  const validationMessageStyle = computed(() => {
    const currentFontSize = getCurrentLanguage() === 'en-US' ? fontSize.en : fontSize.zh;
    const baseFontSize = parseInt(currentFontSize);
    const validationFontSize = `${baseFontSize - 1}px`; // 验证消息字体比正常字体小1px

    return {
      fontSize: validationFontSize,
      lineHeight: getCurrentLanguage() === 'en-US' ? '1.4' : '1.3',
    };
  });

  // 表单布局配置
  const formLayout = computed(() => {
    return {
      labelWidth: formLabelWidth.value,
      labelPosition: 'right',
      size: buttonSize.value,
    };
  });

  // 响应式表单配置（适用于不同屏幕尺寸）
  const responsiveFormConfig = computed(() => {
    // 获取基础宽度（去掉px单位）
    const currentWidth = formLabelWidth.value;
    const baseWidth = parseInt(currentWidth);

    return {
      xs: `${baseWidth - 20}px`, // 小屏幕
      sm: `${baseWidth - 10}px`, // 中小屏幕
      md: `${baseWidth}px`, // 中等屏幕
      lg: `${baseWidth + 10}px`, // 大屏幕
      xl: `${baseWidth + 20}px`, // 超大屏幕
    };
  });

  return {
    // 基础配置
    formLabelWidth,
    formItemSpacing,
    buttonSize,
    inputPlaceholderStyle,
    validationMessageStyle,
    formLayout,

    // 响应式配置
    responsiveFormConfig,

    // 便捷方法
    getCurrentLanguage,
  };
}
