import React from 'react'
import { Props } from './typings'
import { shouldAnimate, fromBreedToComponent } from './deps'
import AnimatedArrow from './AnimatedArrowIcon'
import DownArrow from './directions/DownArrow'
import UpArrow from './directions/UpArrow'
import LeftArrow from './directions/LeftArrow'
import RightArrow from './directions/RightArrow'

/**
 * @example <ArrowIcon color="blue" left />
 */
class ArrowIcon extends React.PureComponent<Props> {
  static defaultProps = {
    left: false,
    right: false,
    down: false,
    up: false,

    // everywhere we want it animated, pass in true :-)
    isAnimated: false,
  }

  /**
   * @todo need to split this up again
   */
  render() {
    // @todo use uxui-modules/utils/omit
    const {
      type,
      color,
      left,
      right,
      down,
      up,
      // @todo - these do not pass through, no
      // fat,
      // circle,
      // rightcircle,
      // leftcircle,
      // leftCircle,
      // rightCircle,
      //
      animated,
      isAnimated,
      ...passthroughProps
    } = this.props

    // includes things like the color & className so that we can use .withComponent
    // since this was not passed into animate, all the components using
    // styled.withComponent broke
    const attributes = {
      ...passthroughProps,
      color,
    }

    if (shouldAnimate(this.props)) {
      return <AnimatedArrow isDown={down} isUp={up} {...attributes} />
    } else if (down) {
      return <DownArrow {...attributes} />
    } else if (up) {
      return <UpArrow {...attributes} />
    } else if (left) {
      return <LeftArrow {...attributes} />
    } else if (right) {
      return <RightArrow {...attributes} />
    } else {
      const Component = fromBreedToComponent(type)
      return <Component />
    }
  }
}

export { ArrowIcon }
export default ArrowIcon