import * as React from 'react';
import * as styles from './CollapsedPayment.scss';

import PayPalIcon from './../icons/PayPalIcon/PayPalIcon';
import CreditCardIcon from './../icons/CreditCardIcon/CreditCardIcon';
import MercadoPagoIcon from './../icons/MercadoPagoIcon/MercadoPagoIcon';
import PagSeguroIcon from './../icons/PagSeguroIcon/PagSeguroIcon';
import YandexIcon from './../icons/YandexIcon/YandexIcon';
import OfflineIcon from './../icons/OfflineIcon/OfflineIcon';
import CreditCardTypeIcon from '../icons/CreditCardTypeIcon/CreditCardTypeIcon';

interface ICollapsedPaymentProps {
  iconName: string;
  title: string;
}

const iconHash = {
  maestro: <CreditCardTypeIcon cardType="maestro"/>,
  dankort: <CreditCardTypeIcon cardType="dankort"/>,
  visa: <CreditCardTypeIcon cardType="visa"/>,
  mastercard: <CreditCardTypeIcon cardType="mastercard"/>,
  amex: <CreditCardTypeIcon cardType="amex"/>,
  americanExpress: <CreditCardTypeIcon cardType="amex"/>,
  dinersclub: <CreditCardTypeIcon cardType="diners"/>,
  discover: <CreditCardTypeIcon cardType="discover"/>,
  discoverDiners: <CreditCardTypeIcon cardType="discover"/>,
  unionpay: <CreditCardTypeIcon cardType="unionpay"/>,
  creditCard: <CreditCardIcon/>,
  payPal: <PayPalIcon/>,
  mercadoPago: <MercadoPagoIcon/>,
  pagSeguro: <PagSeguroIcon/>,
  yandex: <YandexIcon/>,
  offline: <OfflineIcon/>,
  fakePaymentMethod: (
    <img
      className={styles.icon}
      src="https://www.wix.com/_partials/third-party/cashier-settings/methods/method-icon-fakePaymentMethod.svg"
    />
  )
};

export default (props: ICollapsedPaymentProps) => {
  return (
    <div
      className={styles.collapsedPayment}
      data-hook="wcn-collapsed-payment"
    >
      {iconHash[props.iconName]}
      <div className={styles.text}>{props.title}</div>
    </div>
  );
};