import React from 'react'
import { fromPropsToIdentifier } from 'atoms/Icons/deps'
import { DefaultProps } from 'icons/typings'
import Vector from 'atoms/Vector'

// @todo?
const wording = {
  vectorClassName: 'arrow-up up-arrow up up',
  title: 'Arrow Icon (upward facing)',
  description:
    'An arrow head, pointing upwards (similar to the shape of a "^").',
  identifier: 'arrow-up',
}

const UpArrowWrapper = styled.div.attrs({
  className: 'arrow-wrapper',
}) `
  width: rem(24);
  height: rem(24);
  display: flex;
  align-items: center;
  justify-content: center;
`

function fromBreedToComponent(props: DefaultProps) {
  const { breed, color } = props
  switch (breed) {
    case 'arrowV1':
      return {
        svgPath: (
          <path d={'M258,152l26-30L142,0,0,122l26,30L142,52Z'} fill={color} />
        ),
        viewBox: '0 0 284 152',
      }

    default:
      return {
        svgPath: (
          <path
            d={'M7.5 3.63L13.4 9 15 6.9 7.5 0 0 6.9l1.63 2.06z'}
            fill={color}
            fillRule={'evenodd'}
          />
        ),
        viewBox: '0 0 15 9',
      }
  }
}

class UpArrow extends React.PureComponent<DefaultProps> {
  static defaultProps = {
    width: '15px',
    height: '9px',
    color: '#1E1E1E',
  }
  render() {
    const { svgPath, viewBox } = fromBreedToComponent(this.props)
    const identifier = fromPropsToIdentifier(wording)
    return (
      <UpArrowWrapper>
        <Vector
          {...this.props}
          {...wording}
          viewBox={viewBox}
          namespace={identifier}
        >
          {svgPath}
        </Vector>
      </UpArrowWrapper>
    )
  }
}

export { UpArrow }
export default UpArrow