import React from 'react';
import { keyframes } from '@emotion/core';
import styled from '@emotion/styled';

import { colors } from 'utils/theme';

const RotateKeyFrame = keyframes`
  100% {
    transform: rotate(360deg);
  }
`;

const DashKeyframe = keyframes`
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
`;

const Loader = styled.div<{ width: string }>`
  position: relative;
  margin: 0 auto;
  width: ${(props): string => props.width};

  &:before {
    content: '';
    display: block;
    padding-top: 100%;
  }
`;

const LoaderSpinner = styled.svg<{ color: string }>`
  animation: ${RotateKeyFrame} 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

  circle {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke: ${(props): string => props.color};
    animation: ${DashKeyframe} 1.5s ease-in-out infinite
  }
`;

interface LoadingSpinnerProps {
  width: string;
  color: string;
}

const LoadingSpinner = (props: LoadingSpinnerProps): JSX.Element => (
  <Loader width={props.width}>
    <LoaderSpinner
      viewBox="25 25 50 50"
      color={props.color}
    >
      <circle
        cx="50"
        cy="50"
        r="20"
        fill="none"
        strokeWidth="4"
        strokeMiterlimit="10"
      />
    </LoaderSpinner>
  </Loader>
);

LoadingSpinner.defaultProps = {
  width: '30px',
  color: colors.primary
};

export default LoadingSpinner;