import InlineSvgEmbedder from './inline-svg';

const svgToImgUrl = (svg: string) => {
  // fix: #225, https://stackoverflow.com/a/52135328)
  const blob = new Blob([svg], { type: 'image/svg+xml' });
  return URL.createObjectURL(blob);
};

export interface ImgEmbedderProps extends React.HTMLAttributes<HTMLImageElement> {
  svg: string;
  alt?: string;
  /** 对于包含 foreignObject 的 svg, fallback 到 inline svg + shadow DOM */
  fallback?: true | false;
}

/** 基于 <img> 嵌入 svg */
function ImgEmbedder({ svg, alt = '', fallback = true, ...rest }: ImgEmbedderProps) {
  // 包含 foreignObject 的 svg, fallback 到 shadow dom
  if (fallback && svg.indexOf('</foreignObject>') > -1) {
    return <InlineSvgEmbedder svg={svg} />;
  }

  const url = svgToImgUrl(svg);
  return <img src={url} onLoad={() => URL.revokeObjectURL(url)} alt={alt} {...rest} />;
}

export default ImgEmbedder;
