// @flow
import React from 'react';
import styled from 'styled-components';
import type { SpinnerProps } from './spinner.proptypes';
import { Box } from '../../../primitives';
import { getFontSize } from '../../../mixins/typography';

const SpinnerAnimation = styled.div`
  display: inline-block;
  position: relative;
  width: ${getFontSize};
  height: ${getFontSize};
  padding-top: calc(${getFontSize} * 0.0625);

  div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: ${getFontSize};
    height: ${getFontSize};
    border: calc(${getFontSize} * 0.125) solid;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  div:nth-child(1) {
    animation-delay: -0.45s;
  }
  div:nth-child(2) {
    animation-delay: -0.3s;
  }
  div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;

export const Spinner = ({
  className,
  spacing,
  grow,
  shrink,
  basis,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
  colorName = 'greyscale-dark',
  fontSize,
  ...props
}: SpinnerProps) => (
  <Box
    className={className}
    data-cy={dataCy}
    data-qa={dataQa}
    id={id}
    spacing={spacing}
    grow={grow}
    shrink={shrink}
    basis={basis}
    {...props}
  >
    <SpinnerAnimation colorName={colorName} fontSize={fontSize}>
      <div />
      <div />
      <div />
      <div />
    </SpinnerAnimation>
  </Box>
);

Spinner.displayName = 'Spinner';
