import React from 'react'
import Vector from 'atoms/Vector'
import { renderWrapper as defaultRenderWrapper } from '../renderProps'
import { DefaultProps } from 'icons/typings'
import AmazonCardIcon from './AmazonCardIcon'
import AmexCardIcon from './AmexCardIcon'
import AmericanExpressCardIcon from './AmericanExpressCardIcon'
import DefaultCardIcon from './DefaultCardIcon'
import DinersCardIcon from './DinersCardIcon'
import DiscoverCardIcon from './DiscoverCardIcon'
import MasterCardIcon from './MasterCardIcon'
import VisaCardIcon from './VisaCardIcon'
import WesternUnionCardIcon from './WesternUnionCardIcon'

// 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',
}

// returning breed based on the breedType
function fromBreedToComponent(type: string) {
  switch (type) {
    case 'amazon':
      return AmazonCardIcon
    case 'amex':
      return AmexCardIcon
    case 'american-express':
      return AmericanExpressCardIcon
    case 'diners':
      return DinersCardIcon
    case 'discover':
      return DiscoverCardIcon
    case 'master':
      return MasterCardIcon
    case 'visa':
      return VisaCardIcon
    case 'wester-union':
      return WesternUnionCardIcon
    case 'default':
    default:
      return DefaultCardIcon
  }
}

class PaymentsCardIcon extends React.PureComponent<Props> {
  static defaultProps = {
    renderWrapper: defaultRenderWrapper,
  }

  render() {
    const { type, renderWrapper, ...remainingProps } = this.props
    const Component = fromBreedToComponent(type)
    const componentView = <Component {...remainingProps} />
    return renderWrapper(componentView)
  }
}

export { PaymentsCardIcon }
export default PaymentsCardIcon