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

const wording = {
  vectorClassName: 'arrow-down down-arrow down',
  title: 'Down Arrow Icon',
  description:
    'An arrow head pointing downwards which is similar to the shape of the alphabet "V"',
  identifier: 'arrow-down',
}

const DownArrowWrapper = 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 fill={color} d={'M26,0L0,30,142,152,284,30,258,0,142,100Z'} />
        ),
        viewBox: '0 0 284 152',
      }

    default:
      return {
        svgPath: (
          <path
            fill={color}
            fillRule={'evenodd'}
            d={'M7.5 5.37L13.4 0 15 2.1 7.5 9 0 2.1 1.63.04z'}
          />
        ),
        viewBox: '0 0 15 9',
      }
  }
}

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