import React, { useEffect } from 'react';

const AMAZON_WALLET_WIDGET_DIV_ID = 'walletWidgetDiv';

export const WalletWidget =(props: any) => {
  const { onReady, onError, onPaymentSelect, sellerId, agreementType, oro, error } = props;

  useEffect(() => {
      //@ts-ignore
      new window.OffAmazonPayments.Widgets.Wallet({
        sellerId,
        design: { designMode: 'responsive' },
        onReady,
        agreementType,
        onPaymentSelect,
        amazonOrderReferenceId: oro,
        onError,
      }).bind(AMAZON_WALLET_WIDGET_DIV_ID);
  }, [oro]);

  return (
      <div
          style={{
            height: 228,
            display: error ? 'block': 'none', marginBottom: 16
          }}
          id={AMAZON_WALLET_WIDGET_DIV_ID}
      />
  );
}
