import React, { useEffect, useMemo, useRef, useState } from 'react';

import { Button, Image, message, Modal, Tooltip, Upload } from 'antd';
import { QxIcon } from '@/components';

import defaultImg from '@/components/default/default_cover.png';

const defaultIcon: Record<string, string> = {
  form: 'icon-app-file-fill',
  group: 'icon-app-folder-2-fill',
  report: 'icon-app-performance-fill',
  url: 'icon-app-share-forward-fill',
  page: 'icon-app-tablicon-app-fill',
  dataset: 'icon-app-presentation-2-fill',
  datasetCube: 'icon-app-box-3-fill',
  app: 'icon-app-grid-2-fill',
};

// 数据流 图标展示
export const getIcon = (icon: string, type?: string) => {
  if ((icon as string)?.startsWith('http')) {
    return (
      <Image
        className={'qx-data-flow__img'}
        src={icon}
        fallback={defaultImg}
        preview={false}
        width={'16px'}
        height={'16px'}
        style={{
          width: '16px',
          height: '16px',
          borderRadius: '4px',
        }}
        alt=""
      />
    );
  } else {
    return (
      <QxIcon
        className={'qx-data-flow__icon'}
        type={icon || defaultIcon[type || 'form']}
      />
    );
  }
};