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

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

type SvgProps = {
  size: number,
}

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

export const Svg = styled.svg<SvgProps>`
  --size: ${({ size }) => `${size}px`};

  background-color: #5EB2FF;
  width: var(--size);
  height: var(--size);
  position: relative;
  border-radius: 50%;
`

export const Circle = styled.circle<TCircle>`
  fill: transparent;
  stroke: white;
  stroke-width: var(--size);
  stroke-dasharray: ${({ strokeDashOffset }) => strokeDashOffset};
  stroke-dashoffset: ${({ strokeDashOffset }) => strokeDashOffset};
  transform: rotate(-90deg);
  transform-origin: center;
  animation-name: ${({ currentEpisodesPercent, strokeDashOffset }) => (
    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;
`
