import { css, keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import React, { FC } from 'react';

import { ColorTokens } from '../../foundation/Colors';
import { shouldNotForwardProps } from '../../utils/should-not-forward-props';

const fill = keyframes`
  0%, 25%  { background: transparent; }
  45%, 75% { background: currentColor; }
  95%,100% { background: transparent; }
`;

const Wrapper = styled('div', shouldNotForwardProps(['color', 'gap']))<
  Pick<Props, 'gap' | 'color'>
>`
  display: inline-flex;
  gap: ${({ gap = 2 }) => `${gap}px`};
  color: ${({ theme, color }) => color || theme.colors.white100};
`;

const Box = styled.span<{ delay: number; size: number }>`
  ${({ size, delay }) => css`
    width: ${size}px;
    height: ${size}px;
    border: 2px solid currentColor;
    animation: ${fill} 1.5s ease-in-out ${delay}s infinite;
  `}
`;

type Props = {
  color?: ColorTokens;
  count?: number;
  gap?: number;
  size?: number;
};

export const LoadingBoxes: FC<Props> = ({ size = 12, gap, count = 7, color }) => (
  <Wrapper aria-label="Loading" color={color} gap={gap}>
    {Array.from({ length: count }).map((_, i) => (
      <Box key={i} delay={i * 0.15} size={size} />
    ))}
  </Wrapper>
);