/**
 * A base component for svg/img graphics
 * https://github.com/yr/graphics-component
 * @copyright Yr
 * @license MIT
 */
import React from 'react';

export type GraphicType = 'img' | 'svg';

export interface GraphicProps {
  fallback?: boolean;
  height?: string;
  id: string;
  rootImagePath?: string;
  type?: GraphicType;
  width?: string;
}

export class Graphic extends React.PureComponent<GraphicProps, {}> {
  static defaultProps = { type: 'svg', fallback: true, height: '25px', width: '25px' };

  render() {
    const { id, type, fallback, height, width } = this.props;
    let { rootImagePath = '' } = this.props;

    if (!id) {
      return null;
    }

    if (rootImagePath && rootImagePath.charAt(rootImagePath.length - 1) !== '/') {
      rootImagePath += '/';
    }

    if (type === 'svg') {
      return (
        <svg x={'0'} y={'0'} height={height} focusable={'false'} width={width} viewBox={'0 0 100 100'}>
          <use xlinkHref={`#${id}`} x={0} y={0} width={100} height={100} />
          {fallback ? (
            // @ts-ignore src is a valid attribute on the <image> tag
            <image src={`${rootImagePath}${id}.png`} xlinkHref="" />
          ) : null}
        </svg>
      );
    } else {
      return <img src={`${rootImagePath}${id}.png`} />;
    }
  }
}