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

// extending interface from Label component
interface Props extends DefaultProps {}

const wording = {
  description:
    'Payments Card Icon is used to represent the payement section card',
  title: 'PaymentsCardIcon',
  vectorClassName: 'paymentscard',
}

function fromBreedToComponent(breed: string) {
  switch (breed) {
    case 'striped':
      return {
        svgPath: (
          <path d="M564,399h-0.013A53.492,53.492,0,0,1,510.5,452c-0.168,0-.333-0.011-0.5-0.013V452H52v-0.038A53.483,53.483,0,0,1,.012,399H0V54H0.012C0.011,53.833,0,53.668,0,53.5A53.489,53.489,0,0,1,52,.038V0H510V0.013c0.167,0,.332-0.013.5-0.013A53.5,53.5,0,0,1,564,53.5c0,0.168-.011.333-0.013,0.5H564V399ZM510,54H52v59H510V54Zm0,173H52V399H510V227Z" />
        ),
        viewBox: '0 0 564 452',
      }
    default:
      return {
        svgPath: (
          <g strokeWidth="2" fill="none" fillRule="evenodd">
            <path
              d="M44 28a4 4 0 0 1-4 4H5a4 4 0 0 1-4-4V5a4 4 0 0 1 4-4h35a4 4 0 0 1 4 4v23zM1 9h43M1 16h43"
              strokeLinecap="round"
            />
            <path d="M25 12v1m4-1v1m4-1v1m4-1v1" strokeLinecap="square" />
          </g>
        ),
        viewBox: '0 0 45 33',
      }
  }
}

class DefaultCardIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '45px',
    height: '33px',
    stroke: '#000000',
  }

  render() {
    const { breed } = this.props
    const { svgPath, viewBox } = fromBreedToComponent(breed)
    const identifier = fromPropsToIdentifier(wording)

    return (
      <Vector
        {...this.props}
        {...wording}
        viewBox={viewBox}
        namespace={identifier}
      >
        {svgPath}
      </Vector>
    )
  }
}

export { DefaultCardIcon }
export default DefaultCardIcon