// @flow
import classnames from 'classnames';
import React, { Fragment } from 'react';
import style from './LoadingSpinner.scss';

type Color = 'teal' | 'blue' | 'green' | 'grey' | 'red' | 'white';

type Props = {
  className?: string,
  color?: Color,
  fidget?: boolean,
  ringColor?: Color,
};

function LoadingSpinner(props: Props) {
  const { className, color, fidget, ringColor, ...restProps } = props;
  const classes = classnames(style.outer, color && style[color], className);
  const ringClasses = classnames(style.ring, ringColor && style[ringColor]);

  return (
    <div className={classes}>
      <svg
        className={classnames(style.spinner, { [style.fidget]: fidget })}
        {...restProps}
        viewBox={fidget ? '0 0 100 100' : '0 0 24 24'}
        version="1.1"
      >
        {fidget ? (
          <g transform="translate(0, -8)">
            <path
              className={style.highlight}
              d="M27.1,79.4c-1.1,0.6-2.4,1-3.7,1c-2.6,0-5.1-1.4-6.4-3.7c-2-3.5-0.8-8,2.7-10.1c1.1-0.6,2.4-1,3.7-1c2.6,0,5.1,1.4,6.4,3.7 C31.8,72.9,30.6,77.4,27.1,79.4z"
            />
            <path
              className={style.highlight}
              d="M72.9,79.4c1.1,0.6,2.4,1,3.7,1c2.6,0,5.1-1.4,6.4-3.7c2-3.5,0.8-8-2.7-10.1c-1.1-0.6-2.4-1-3.7-1c-2.6,0-5.1,1.4-6.4,3.7 C68.2,72.9,69.4,77.4,72.9,79.4z"
            />
            <path
              className={style.highlight}
              d="M 57.4,27 A 7.4000001,7.4000001 0 0 1 50,34.4 7.4000001,7.4000001 0 0 1 42.6,27 7.4000001,7.4000001 0 0 1 50,19.6 7.4000001,7.4000001 0 0 1 57.4,27 Z"
            />
            <path
              className={ringClasses}
              d="M86.5,57.5c-3.1-1.9-6.4-2.8-9.8-2.8c-0.5,0-0.9,0-1.4,0c-0.4,0-0.8,0-1.1,0c-2.1,0-4.2-0.4-6.2-1.2 c-0.8-3.6-2.8-6.9-5.4-9.3c0.4-2.5,1.3-4.8,2.7-6.9c2-2.9,3.2-6.5,3.2-10.4c0-10.2-8.2-18.4-18.4-18.4c-0.3,0-0.6,0-0.9,0 C39.7,9,32,16.8,31.6,26.2c-0.2,4.1,1,7.9,3.2,11c1.4,2.1,2.3,4.5,2.7,6.9c-2.6,2.5-4.6,5.7-5.4,9.3c-1.9,0.7-4,1.1-6.1,1.1 c-0.4,0-0.8,0-1.2,0c-0.5,0-0.9-0.1-1.4-0.1c-3.1,0-6.3,0.8-9.2,2.5c-9.1,5.2-12,17-6.3,25.9c3.5,5.4,9.5,8.4,15.6,8.4 c2.9,0,5.8-0.7,8.5-2.1c3.6-1.9,6.3-4.9,8-8.3c1.1-2.3,2.7-4.2,4.6-5.8c1.7,0.5,3.5,0.8,5.4,0.8c1.9,0,3.7-0.3,5.4-0.8 c1.9,1.6,3.5,3.5,4.6,5.7c1.5,3.2,4,6,7.4,8c2.9,1.7,6.1,2.5,9.2,2.5c6.6,0,13.1-3.6,16.4-10C97.3,73.1,94.4,62.5,86.5,57.5z M29.6,83.7c-1.9,1.1-4,1.6-6.1,1.6c-4.2,0-8.4-2.2-10.6-6.1c-3.4-5.9-1.4-13.4,4.5-16.8c1.9-1.1,4-1.6,6.1-1.6 c4.2,0,8.4,2.2,10.6,6.1C37.5,72.8,35.4,80.3,29.6,83.7z M50,39.3c-6.8,0-12.3-5.5-12.3-12.3S43.2,14.7,50,14.7 c6.8,0,12.3,5.5,12.3,12.3S56.8,39.3,50,39.3z M87.2,79.2c-2.3,3.9-6.4,6.1-10.6,6.1c-2.1,0-4.2-0.5-6.1-1.6 c-5.9-3.4-7.9-10.9-4.5-16.8c2.3-3.9,6.4-6.1,10.6-6.1c2.1,0,4.2,0.5,6.1,1.6C88.6,65.8,90.6,73.3,87.2,79.2z"
            />
          </g>
        ) : (
          <Fragment>
            <path
              className={ringClasses}
              d="M23.39 15.79L22.93 16.95L22.36 18.05L21.68 19.09L20.91 20.04L20.04 20.91L19.09 21.68L18.05 22.36L16.95 22.93L15.79 23.39L14.57 23.72L13.31 23.93L12 24L10.69 23.93L9.43 23.72L8.21 23.39L7.05 22.93L5.95 22.36L4.91 21.68L3.96 20.91L3.09 20.04L2.32 19.09L1.64 18.05L1.07 16.95L0.61 15.79L0.28 14.57L0.07 13.31L0 12L0.07 10.69L0.28 9.43L0.61 8.21L1.07 7.05L1.64 5.95L2.32 4.91L3.09 3.96L3.96 3.09L4.91 2.32L5.95 1.64L7.05 1.07L8.21 0.61L9.43 0.28L10.69 0.07L12 0L12 2.04L10.65 2.13L9.35 2.39L8.12 2.82L6.97 3.4L5.91 4.12L4.96 4.96L4.12 5.91L3.4 6.97L2.82 8.12L2.39 9.35L2.13 10.65L2.04 12L2.13 13.35L2.39 14.65L2.82 15.88L3.4 17.03L4.12 18.09L4.96 19.04L5.91 19.88L6.97 20.6L8.12 21.18L9.35 21.61L10.65 21.87L12 21.96L13.35 21.87L14.65 21.61L15.88 21.18L17.03 20.6L18.09 19.88L19.04 19.04L19.88 18.09L20.6 17.03L21.18 15.88L21.61 14.65L21.87 13.35L21.96 12L24 12L23.93 13.31L23.72 14.57L23.39 15.79Z"
            />
            <path
              className={style.highlight}
              d="M15.79 0.61L16.95 1.07L18.05 1.64L19.09 2.32L20.04 3.09L20.91 3.96L21.68 4.91L22.36 5.95L22.93 7.05L23.39 8.21L23.72 9.43L23.93 10.69L24 12L21.96 12L21.87 10.65L21.61 9.35L21.18 8.12L20.6 6.97L19.88 5.91L19.04 4.96L18.09 4.12L17.03 3.4L15.88 2.82L14.65 2.39L13.35 2.13L12 2.04L12 0L13.31 0.07L14.57 0.28L14.57 0.28L15.79 0.61Z"
            />
          </Fragment>
        )}
      </svg>
    </div>
  );
}

LoadingSpinner.defaultProps = {
  color: 'teal',
  fidget: false,
  ringColor: 'grey',
};

export default LoadingSpinner;
