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

/**
 * 导航栏配置hooks
 * 提供响应式的导航栏配置，根据当前语言自动调整宽度和样式
 * @param {Object} options - 配置选项
 * @param {string} options.zhWidth - 中文导航总宽度，默认 '200px'
 * @param {string} options.enWidth - 英文导航总宽度，默认 '260px'
 * @param {Object} options.menu1Width - 主菜单宽度配置
 * @param {Object} options.menu2Width - 子菜单宽度配置
 * @param {Object} options.menuItemPadding - 菜单项内边距配置
 * @param {Object} options.fontSize - 字体大小配置
 */
export function useNavigationConfig(options = {}) {
  // 解构配置选项，提供默认值
  const {
    zhWidth = '200px',
    enWidth = '260px',
    menu1Width = { zh: '104px', en: '140px' },
    menu2Width = { zh: '110px', en: '130px' },
    menuItemPadding = { zh: '16px', en: '20px' },
    fontSize = { zh: '14px', en: '13px' },
    subMenuPadding = { zh: '8px', en: '12px' },
  } = options;

  // 根据当前语言计算导航栏总宽度
  const navigationWidth = computed(() => {
    return getCurrentLanguage() === 'en-US' ? enWidth : zhWidth;
  });

  // 根据当前语言计算主菜单宽度 (menu-1)
  const menu1WidthValue = computed(() => {
    return getCurrentLanguage() === 'en-US' ? menu1Width.en : menu1Width.zh;
  });

  // 根据当前语言计算子菜单宽度 (menu-2)
  const menu2WidthValue = computed(() => {
    return getCurrentLanguage() === 'en-US' ? menu2Width.en : menu2Width.zh;
  });

  // 根据当前语言计算菜单项内边距
  const menuItemPaddingValue = computed(() => {
    return getCurrentLanguage() === 'en-US' ? menuItemPadding.en : menuItemPadding.zh;
  });

  // 根据当前语言计算子菜单内边距
  const subMenuPaddingValue = computed(() => {
    return getCurrentLanguage() === 'en-US' ? subMenuPadding.en : subMenuPadding.zh;
  });

  // 根据当前语言计算字体大小
  const fontSizeValue = computed(() => {
    return getCurrentLanguage() === 'en-US' ? fontSize.en : fontSize.zh;
  });

  // 菜单项样式配置
  const menuItemStyle = computed(() => {
    return {
      padding: `0 ${menuItemPaddingValue.value}`,
      fontSize: fontSizeValue.value,
      minWidth: getCurrentLanguage() === 'en-US' ? '120px' : '80px',
    };
  });

  // 子菜单项样式配置
  const subMenuItemStyle = computed(() => {
    return {
      padding: `0 ${subMenuPaddingValue.value}`,
      fontSize: fontSizeValue.value,
      minWidth: getCurrentLanguage() === 'en-US' ? '140px' : '100px',
    };
  });

  // 导航容器样式配置
  const navigationContainerStyle = computed(() => {
    return {
      width: navigationWidth.value,
      minWidth: navigationWidth.value,
      maxWidth: getCurrentLanguage() === 'en-US' ? '320px' : '240px',
    };
  });

  // 响应式导航配置（适用于不同屏幕尺寸）
  const responsiveNavigationConfig = computed(() => {
    const baseWidth = parseInt(navigationWidth.value);

    return {
      xs: `${Math.max(baseWidth - 40, 160)}px`, // 小屏幕，最小160px
      sm: `${Math.max(baseWidth - 20, 180)}px`, // 中小屏幕，最小180px
      md: `${baseWidth}px`, // 中等屏幕
      lg: `${baseWidth + 20}px`, // 大屏幕
      xl: `${baseWidth + 40}px`, // 超大屏幕
    };
  });

  // 菜单文本截断配置
  const textTruncateConfig = computed(() => {
    return {
      maxWidth: getCurrentLanguage() === 'en-US' ? '180px' : '120px',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
    };
  });

  return {
    // 基础配置
    navigationWidth,
    menu1WidthValue,
    menu2WidthValue,
    menuItemPaddingValue,
    subMenuPaddingValue,
    fontSizeValue,

    // 样式配置
    menuItemStyle,
    subMenuItemStyle,
    navigationContainerStyle,
    textTruncateConfig,

    // 响应式配置
    responsiveNavigationConfig,

    // 便捷方法
    getCurrentLanguage,
  };
}
