/**
 * @file @todo this needs splitting up & moving into ArrowIcon
 */
import React from 'react'
import { render } from 'react-dom'
import { AnimatedArrowIconProps } from './typings'
import { isDown, isUp } from './deps'

class AnimatedArrowIcon extends React.PureComponent<AnimatedArrowIconProps> {
  static defaultProps = {
    identifier: 'animated-arrow-icon',
    isUp: false,
    isDown: true,
  }
  state = {
    paths: {
      up: '7.5 5.37 13.4 0 15 2.1 7.5 9 0 2.1 1.63 0.04',
      down:
        '7.48468018 0 14.9693604 6.89398193 13.386673 8.99369812 7.48468018 3.62214661 1.61653912 8.94146471 0 6.89398193',
    },
  }
  // empty version
  dom = {
    beginElement() {
      console.warn('had no ref')
    },
  }

  renderPath() {
    // opposite of animate
    const path = isDown(this.props)
      ? this.state.paths.down
      : this.state.paths.up

    return <polygon id={this.props.identifier} fill={'#000'} points={path} />
  }

  setAnimationRef = node => {
    this.dom = node
  }

  renderAnimation() {
    // opposite of path
    const animateTo = isDown(this.props)
      ? this.state.paths.up
      : this.state.paths.down

    return (
      <animate
        ref={this.setAnimationRef}
        to={animateTo}
        id={'animate-' + this.props.identifier}
        href={'#' + this.props.identifier}
        fill={'freeze'}
        begin={'.5s'}
        attributeName={'points'}
        dur={'500ms'}
      />
    )
  }

  render() {
    const attributes = {
      title: 'click me!',
      width: '15px',
      height: '9px',
      viewBox: '0 0 15 9',
    }
    this.dom.beginElement()
    return (
      <svg {...attributes}>
        {this.renderPath()}
        {this.renderAnimation()}
      </svg>
    )
  }
}

export { AnimatedArrowIcon }
export default AnimatedArrowIcon