import React from "react"
import Radium from "radium"
import { colorInfo, sizeInfo } from "ui/style"
import anime from "animejs"

@Radium
export class Loader extends React.Component {
  render() {
    const size = sizeInfo.loaderSize
    const spacing = sizeInfo.loaderSpacing

    const addAnimation = (elem, i) => {
      anime({
        targets: elem,
        scale: [
          { value: 0.0, duration: 800, easing: "easeOutSine", delay: 200 * i },
          { value: 1.0, duration: 800, easing: "easeOutSine" },
          { value: 1.0, duration: 200 * (2 - i) },
        ],
        loop: true,
      })
    }

    return (
      <div style={{ height: size }}>
        {[0, 1, 2].map((i) => (
          <span
            key={i}
            ref={(elem) => addAnimation(elem, i)}
            style={{
              display: "inline-block",
              marginLeft: i > 0 ? spacing : 0,
              width: size,
              height: size,
              background: colorInfo.textInverse,
              borderSize: 0,
              borderRadius: "100%",
            }}
          />
        ))}
      </div>
    )
  }
}