import styled, { keyframes } from 'styled-components'
import { InferComponentProps } from './types'

export const Dot = styled.div`
  margin: 0.25em 0.3em;
  border-radius: 50%;
  height: 0.5em;
  width: 0.5em;
  background-color: currentcolor;
`

export const DotWrapper = styled.div`
  display: flex;
`

const fadeIn = keyframes`
  from { opacity: 1; }
  to { opacity: 0; }
`

const Dot1 = styled(Dot)`
  animation: ${fadeIn} 1.5s ease infinite;
`

const Dot2 = styled(Dot)`
  animation: ${fadeIn} 1.5s ease 0.15s infinite;
`

const Dot3 = styled(Dot)`
  animation: ${fadeIn} 1.5s ease 0.3s infinite;
`
const colors = {
  purple: 'navPrimary',
  green: 'navStatusPositive',
  white: 'navNeutralLight',
} as const

export type LoadingDotColorKey = keyof typeof colors

export const Wrapper = styled(DotWrapper)<{ dotColor?: LoadingDotColorKey }>`
  color: ${({ dotColor, theme }) => (dotColor ? theme[colors[dotColor]] : undefined)};
`

export const LoadingDots = (props: InferComponentProps<typeof Wrapper>) => (
  <Wrapper {...props}>
    <Dot1 />
    <Dot2 />
    <Dot3 />
  </Wrapper>
)

const StyledLoadingDots = styled(LoadingDots)``
export default StyledLoadingDots