import React from 'react';
import styled, { keyframes } from 'styled-components';

interface Props {
  color?: string;
  isActive: boolean;
  margin?: string;
  maskColor?: string;
  radius?: number;
  thickness?: number;
  zIndex?: number;
}

interface MaskProps {
  maskColor?: string;
  zIndex?: number;
}

interface LoadingProps {
  /**
   * Gap from the top of browser
   */
  margin?: string;
  /**
   * color of the wheel
   */
  color?: string;
  /**
   * thickness of the wheel
   */
  thickness?: number;
  /**
   * background color
   */
  maskColor?: string;
  /**
   * how wide the radius of the circle should be (not the same as border radius)
   */
  radius?: number;
}

const Loading = ({ color = '#000', isActive = false, margin = '10% auto', maskColor = 'rgba(255, 255, 255, 0.7)', radius = 60, thickness = 2, zIndex = 9999 }: Props) => {
  if (isActive !== true) {
    return <span />;
  }

  return (
    <LoadingMask id="nwc--loading" className="loading" maskColor={maskColor} zIndex={zIndex}>
      <LoadingCover margin={margin} thickness={thickness} maskColor={maskColor} color={color} radius={radius} />
    </LoadingMask>
  );
};

export default Loading;

const LoadingMask = styled.aside<MaskProps>`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: ${({ maskColor }) => maskColor};
  z-index: ${({ zIndex }) => zIndex};
`;

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

const LoadingCover = styled.div<LoadingProps>`
  margin: ${({ margin }) => margin};
  border: ${({ maskColor, thickness }) => `${thickness}px solid ${maskColor}`};
  border-top: ${({ thickness, color }) => `${thickness}px solid ${color}`};
  border-radius: 50%;
  width: ${({ radius }) => `${radius}px`};
  height: ${({ radius }) => `${radius}px`};
  animation: ${spin} 1.25s infinite;
`;