import styled, { keyframes } from 'styled-components/macro'

type TCircle = {
  animationPause?: boolean,
  currentAnimationTime: number,
  currentEpisodesPercent: number,
}

const strokeDashOffset = 43.5

const clockAnimation = (currentEpisodesPercent?: number) => keyframes`
  from {
    stroke-dashoffset: ${currentEpisodesPercent};
  }
  to {
    stroke-dashoffset: 0;
  }
`

export const Svg = styled.svg`
  background-color: #5EB2FF;
  width: 14px;
  height: 14px;
  position: relative;
  border-radius: 50%;
`

export const Circle = styled.circle<TCircle>`
  fill: transparent;
  stroke: white;
  stroke-width: 14px;
  stroke-dasharray: ${strokeDashOffset};
  stroke-dashoffset: ${strokeDashOffset};
  transform: rotate(-90deg);
  transform-origin: center;
  animation-name: ${({ currentEpisodesPercent }) => (
    clockAnimation(strokeDashOffset - (strokeDashOffset * currentEpisodesPercent / 100))
  )};
  animation-duration: ${({ currentAnimationTime }) => `${currentAnimationTime}s`};
  animation-play-state: ${({ animationPause }) => (animationPause ? 'paused' : 'running')};
  animation-timing-function: linear;
  animation-fill-mode: forwards;
`
