import { computed } from 'vue';
import { getCdnImageUrl, getCdnStaticUrl, appConfig } from '@/config';

/**
 * 图片路径管理的composable函数
 * 提供便捷的图片路径处理方法
 */
export function useImagePath() {
  /**
   * 处理图片路径，自动添加CDN前缀
   * @param {string} path - 图片相对路径
   * @returns {string} 完整的图片URL
   */
  const cdnImageUrl = (path) => {
    if (!path) return '';
    return getCdnImageUrl(path);
  };

  /**
   * 处理静态资源路径，自动添加CDN前缀
   * @param {string} path - 静态资源相对路径
   * @returns {string} 完整的静态资源URL
   */
  const cdnStaticUrl = (path) => {
    if (!path) return '';
    return getCdnStaticUrl(path);
  };

  /**
   * 批量处理图片路径数组
   * @param {string[]} paths - 图片路径数组
   * @returns {string[]} 处理后的图片URL数组
   */
  const cdnImageUrls = (paths) => {
    if (!Array.isArray(paths)) return [];
    return paths.map(path => cdnImageUrl(path));
  };

  /**
   * 创建响应式的图片路径
   * @param {string} path - 图片相对路径
   * @returns {ComputedRef<string>} 响应式的图片URL
   */
  const reactiveCdnImageUrl = (path) => {
    return computed(() => cdnImageUrl(path));
  };

  /**
   * 获取当前环境信息
   */
  const env = {
    isDev: appConfig.isDev(),
    isProd: appConfig.isProd(),
    isStaging: appConfig.isStaging(),
    current: appConfig.getEnv()
  };

  /**
   * 获取当前配置信息
   */
  const config = appConfig.getConfig();

  return {
    cdnImageUrl,
    cdnStaticUrl,
    cdnImageUrls,
    reactiveCdnImageUrl,
    env,
    config
  };
}
