import fileTagStyles from '~/styles/components/file-tag.css?url';

// 支持的文件拓展名类型
export type FileExtension = 
  | 'pdf' 
  | 'doc' 
  | 'docx' 
  | 'xls' 
  | 'xlsx' 
  | 'ppt' 
  | 'pptx' 
  | 'zip' 
  | 'rar'
  | 'txt'
  | 'jpg'
  | 'png'
  | 'gif'
  | string;

interface FileTagProps {
  extension: FileExtension;
  className?: string;
  size?: 'default' | 'sm' | 'lg';
  showIcon?: boolean;
  showText?: boolean;
  showBackground?: boolean;
}

export function links() {
  return [{ rel: "stylesheet", href: fileTagStyles }];
}

/**
 * 文件标签组件
 * 用于显示文件的扩展名，如PDF、Word、Excel等
 * @param extension 文件扩展名
 * @param className 额外的类名
 * @param size 尺寸：default, sm, lg
 * @param showIcon 是否显示图标，默认为true
 * @param showText 是否显示文件扩展名文本，默认为false
 * @param showBackground 是否显示背景颜色，默认为true
 */
export function FileTag({ 
  extension, 
  className = '', 
  size = 'default', 
  showIcon = true,
  showText = false,
  showBackground = true
}: FileTagProps) {
  // 获取干净的扩展名（去除点号并转换为小写）
  const getCleanExtension = () => {
    return extension.replace(/^\./, '').toLowerCase();
  };

  // 文件扩展名对应的图标
  const getExtensionIcon = () => {
    const ext = getCleanExtension();
    const extensionIconMap: Record<string, string> = {
      'pdf': 'ri-file-pdf-line',
      'doc': 'ri-file-word-line',
      'docx': 'ri-file-word-line',
      'xls': 'ri-file-excel-line',
      'xlsx': 'ri-file-excel-line',
      'ppt': 'ri-file-ppt-line',
      'pptx': 'ri-file-ppt-line',
      'zip': 'ri-file-zip-line',
      'rar': 'ri-file-zip-line',
      'txt': 'ri-file-text-line',
      'jpg': 'ri-image-line',
      'jpeg': 'ri-image-line',
      'png': 'ri-image-line',
      'gif': 'ri-file-gif-line',
    };
    return extensionIconMap[ext] || 'ri-file-line';
  };

  // 获取文件拓展名对应的类名
  const getExtensionClass = () => {
    const ext = getCleanExtension();
    return `file-tag file-tag-${ext} ${showBackground ? '' : 'file-tag-no-bg'}`;
  };

  // 获取尺寸类名
  const getSizeClass = () => {
    return size !== 'default' ? `file-tag-${size}` : '';
  };

  return (
    <span className={`${getExtensionClass()} ${getSizeClass()} ${className}`}>
      {showIcon && <i className={`${getExtensionIcon()} file-tag-icon`}></i>}
      {showText && <span className="file-tag-text">{getCleanExtension().toUpperCase()}</span>}
    </span>
  );
} 