import React from 'react';
import classNames from 'classnames';

export const SpinnerSvgSizes = ['small', 'normal'] as const;
export type SpinnerSvgSize = typeof SpinnerSvgSizes[number];

export const SpinnerDirections = [
  'outgoing',
  'incoming',
  'on-background',
] as const;
export type SpinnerDirection = typeof SpinnerDirections[number];

export interface Props {
  size?: string;
  svgSize: SpinnerSvgSize;
  direction?: SpinnerDirection;
}

export class Spinner extends React.Component<Props> {
  public render() {
    const { size, svgSize, direction } = this.props;

    return (
      <div
        className={classNames(
          'module-spinner__container',
          `module-spinner__container--${svgSize}`,
          direction ? `module-spinner__container--${direction}` : null,
          direction
            ? `module-spinner__container--${svgSize}-${direction}`
            : null
        )}
        style={{
          height: size,
          width: size,
        }}
      >
        <div
          className={classNames(
            'module-spinner__circle',
            `module-spinner__circle--${svgSize}`,
            direction ? `module-spinner__circle--${direction}` : null,
            direction ? `module-spinner__circle--${svgSize}-${direction}` : null
          )}
        />
        <div
          className={classNames(
            'module-spinner__arc',
            `module-spinner__arc--${svgSize}`,
            direction ? `module-spinner__arc--${direction}` : null,
            direction ? `module-spinner__arc--${svgSize}-${direction}` : null
          )}
        />
      </div>
    );
  }
}