import React from 'react'
import { isString } from 'exotic'
import { DefaultProps } from 'icons/typings'
import { fromPropsToIdentifier } from 'atoms/Icons/deps'
import Vector from 'atoms/Vector'
import AmazonCardIcon from './AmazonCardIcon'
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 (isString(type) && type.toLowerCase()) {
    // case 'apple':
    //   return AppleIcon
    // case 'paypal':
    //   return PayPalIcon

    case 'amazon':
      return AmazonCardIcon
    case 'amex':
    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 = {
    width: '100px',
    height: '60px',
    viewBox: '0 0 100 60',
  }

  render() {
    const { type, ...remainingProps } = this.props
    const Component = fromBreedToComponent(type)
    const componentWording = (Component as any).wording as typeof wording
    const identifier = fromPropsToIdentifier(componentWording)
    return (
      <Vector {...remainingProps} {...componentWording} namespace={identifier}>
        <Component {...remainingProps} />
      </Vector>
    )
  }
}

export { PaymentsCardIcon }
export default PaymentsCardIcon