import * as React from "react";

export interface SpinnerProps {
  size?: number;
  position?: { x: number; y: number };
  maxWidth?: number;
  statusText?: string;
  errorOccured?: boolean;
}

const CLASS_NAME = "graph-explorer-spinner";

export class Spinner extends React.Component<SpinnerProps, {}> {
  render() {
    const {
      position = { x: 0, y: 0 },
      size = 50,
      statusText,
      errorOccured,
    } = this.props;

    const textLeftMargin = 5;
    const pathGeometry =
      "m3.47,-19.7 a20,20 0 1,1 -6.95,0 m0,0 l-6,5 m6,-5 l-8,-0" +
      (errorOccured ? "M-8,-8L8,8M-8,8L8,-8" : "");

    return (
      <g
        className={CLASS_NAME}
        data-error={errorOccured}
        transform={`translate(${position.x},${position.y})`}
      >
        <g className={`${CLASS_NAME}__arrow`}>
          <path
            d={pathGeometry}
            transform={`scale(0.02)scale(${size})`}
            fill="none"
            stroke={errorOccured ? "red" : "black"}
            strokeWidth="3"
            strokeLinecap="round"
          />
        </g>
        <text
          style={{ dominantBaseline: "middle" }}
          x={size / 2 + textLeftMargin}
        >
          {statusText}
        </text>
      </g>
    );
  }
}

export class HtmlSpinner extends React.Component<
  { width: number; height: number },
  {}
> {
  render() {
    const { width, height } = this.props;
    const size = Math.min(width, height);
    return (
      <svg width={width} height={height}>
        <Spinner size={size} position={{ x: width / 2, y: height / 2 }} />
      </svg>
    );
  }
}