import { useMemo } from 'react';
import { useQuery } from '@apollo/client';
import { PAYMENT_INVOICE } from 'components/billing/schema/queries';
import {
  PaymentInvoiceQuery,
  PaymentInvoiceQueryVariables,
} from 'types/graphql';

import { useRetryPayment } from './useRetryPayment';

import { Badge, Button, Text } from 'components/common';

import { formatCurrency } from 'utils';

export const InvoicePaymentError = ({ invoiceId }: { invoiceId: string }) => {
  const { data, ...query } = useQuery<
    PaymentInvoiceQuery,
    PaymentInvoiceQueryVariables
  >(PAYMENT_INVOICE, {
    variables: { invoiceId },
  });

  const invoice = useMemo(
    () => (data?.invoice ? JSON.parse(data.invoice) : null),
    [data]
  );

  const [handleRetry, state] = useRetryPayment(invoiceId);

  if (query.loading) return <div>Loading...</div>;

  if (invoice) {
    const loading = state.loading;
    const success = state.message === 'Success';

    const { last_payment_error } = invoice.payment_intent;
    const declineCode =
      last_payment_error?.decline_code || last_payment_error?.code;

    const paymentError = (state.error && state.message) || last_payment_error;

    if (success) {
      return <div>Payment succeeded!</div>;
    }

    return (
      <div className="spacingY2">
        {paymentError && (
          <Text className="spacing2" size="s">
            <span>{paymentError}</span>
            {declineCode && (
              <Badge
                color="red"
                className="fz12"
                style={{ fontFamily: 'monospace' }}
              >
                {declineCode}
              </Badge>
            )}
          </Text>
        )}
        <div className="flex alignCenter justifyBetween spacing2">
          <div className="bold">
            Amount to pay: {formatCurrency(invoice.total / 100)}
          </div>
          <Button onClick={handleRetry} disabled={loading}>
            Retry payment
          </Button>
        </div>
      </div>
    );
  } else {
    return null;
  }
};