import { styled } from 'styleh-components'
import { Vector } from 'atoms/Vector'

const CircleBackground = styled.circle`
  stroke: var(--color-dark-grey);
  stroke-width: 3;
`

const CirclePath = styled.circle`
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;

  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }

  @keyframes color {
    100%,
    0% {
      stroke: #ccc;
    }
    40% {
      stroke: #ccc;
    }
    66% {
      stroke: #ccc;
    }
    80%,
    90% {
      stroke: #ccc;
    }
  }
`

const StyledVector = styled(Vector)``

const CircleLoaderWrapper = styled.div`
  position: relative;
  width: 100px;

  &:before {
    content: '';
    display: block;
    padding-top: 100%;
  }

  ${StyledVector} {
    animation: rotate 2s linear infinite;
    transform-origin: center center;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    @keyframes rotate {
      100% {
        transform: rotate(360deg);
      }
    }
  }
`

export { CircleBackground, CirclePath, StyledVector, CircleLoaderWrapper }