import { createElement as h, PureComponent, cloneElement } from 'react'
import { spring, TransitionMotion } from 'react-motion'

export default class Eccentric extends PureComponent {
  static defaultProps = {
    component: h('div'),
    data: [],
    render: (key, data, style) => null,
    getKey: (datum, i) => datum.key, // must return valid string
    getDefaultStyles: datum => {},
    getStyles: datum => {},
    getWillEnter: datum => {},
    getWillLeave: datum => {}
  };

  render () {
    return h(TransitionMotion, {
      defaultStyles: this.getDefaultStyles(),
      styles: this.getStyles(),
      willEnter: this.willEnter,
      willLeave: this.willLeave,
      children: this.renderCurrentStyles
    })
  }

  renderCurrentStyles = currentStyles => {
    const { component: C, render } = this.props
    const children = Array.isArray(render)
      ? render.map(fn => currentStyles.map(this.createRenderFn(fn)))
      : render

    return cloneElement(this.props.component, { children })
  };

  createRenderFn = renderFn => ({ key, data, style }, i) => renderFn(key, data, style, i);

  getDefaultStyles = () => {
    const {
      getKey,
      getDefaultStyles,
      data
    } = this.props

    return data.map((data, i) => {
      return {
        key: getKey(data, i),
        data,
        style: getDefaultStyles(data, i)
      }
    })
  };

  getStyles = () => {
    const {
      getKey,
      getStyles,
      data
    } = this.props

    return data.map((data, i) => {
      return {
        key: getKey(data, i),
        data,
        style: getStyles(data, i)
      }
    })
  };

  willEnter = config => {
    const { getWillEnter } = this.props
    return getWillEnter(config)
  };

  willLeave = config => {
    const { getWillLeave } = this.props
    return getWillLeave(config)
  };
}