import { useEmotionCss } from '@ant-design/use-emotion-css';
import { CSSProperties } from 'react';

import ai from './icons/ai.svg';
import audio from './icons/audio.svg';
import download from './icons/download.svg';
import excel from './icons/excel.svg';
import folderGroup from './icons/folder-group.svg';
import folderLocked from './icons/folder-locked.svg';
import folderOpen from './icons/folder-open.svg';
import folderPersonal from './icons/folder-personal.svg';
import folderShare from './icons/folder-share.svg';
import folder from './icons/folder.svg';
import gif from './icons/gif.svg';
import html from './icons/html.svg';
import jpg from './icons/jpg.svg';
import pdf from './icons/pdf.svg';
import png from './icons/png.svg';
import ppt from './icons/ppt.svg';
import psd from './icons/psd.svg';
import txt from './icons/txt.svg';
import upload from './icons/upload.svg';
import video from './icons/video.svg';
import white from './icons/white.svg';
import word from './icons/word.svg';
import zip from './icons/zip.svg';

const FileTypeMapper: { [key: string]: any } = {
    'png': png,
    'bmp': png,
    'jpg': jpg,
    'gif': gif,
    'psd': psd,
    'ai': ai,
    'svg': ai,
    'pdf': pdf,
    'txt': txt,
    'ppt': ppt,
    'pptx': ppt,
    'mp4': video,
    'flv': video,
    'avi': video,
    'mp3': audio,
    'wav': audio,
    'doc': word,
    'docx': word,
    'xls': excel,
    'xlsx': excel,
    'htm': html,
    'html': html,
    'zip': zip,
    'rar': zip,
    'upload': upload,
    'download': download,
    'folder': folder,
    'folderGroup': folderGroup,
    'folderOpen': folderOpen,
    'folderLocked': folderLocked,
    'folderPersonal': folderPersonal,
    'folderShar': folderShare,
    'unknown': white,
};

/** 文件图标 */
const FileIcon: React.FC<{
    size?: number;
    style?: CSSProperties;
    className?: string;
    /** 类型 */
    type?: string;
}> = ({ size, style, className, type }) => {
    const svgClassName = useEmotionCss(({ token }) => {
        return {
            width: size ?? token.fontSizeLG,
            lineHeight: 0,
        };
    });

    let fileType: string = type?.replaceAll('.', '')?.toLowerCase() ?? 'unknown';
    if (!FileTypeMapper.hasOwnProperty(fileType)) {
        fileType = 'unknown';
    }

    return (
        <img src={FileTypeMapper[fileType]} className={`${svgClassName} ${className ?? ''}`} style={style} />
    );
}

export default FileIcon;
