import React from 'react'
import anime from 'animejs'
import PropTypes from 'prop-types'

export default class Anime extends React.Component {
  static propTypes = {
    as: PropTypes.string,
    children: PropTypes.node,
  }

  constructor(props) {
    super(props)
    this.targets = []
  }

  componentDidMount() {
    let animeProps = Object.assign({}, this.props, {
      targets: this.targets
    })

    delete animeProps.children
    delete animeProps.as
    this.anime = anime(animeProps)
  }

  shouldComponentUpdate(nextProps) {
    this.anime = anime(Object.assign({}, { targets: this.targets }, nextProps))
    return true
  }

  addTarget = (newTarget) => {
    this.targets = [...this.targets, newTarget]
  }

  render() {
    let children = []

    if (this.props.children) {
      if (Array.isArray(this.props.children)) {
        children = this.props.children
      } else {
        children = [this.props.children]
      }
    }

    return React.createElement(
      (this.props.as || 'div'), {}, children.map((child, i) => (React.cloneElement(child, { key: i, ref: this.addTarget })))
    )
  }
}