import React, { useMemo } from 'react';
import classNames from 'classnames';
import { useFormikContext } from 'formik';
import { sumBy } from 'lodash';
import { CLASSES } from 'common/classes';
import { compose } from 'utils';
import { Money } from 'components';
import { FormattedMessage as T } from 'components';

import PaymentMadeFormHeaderFields from './PaymentMadeFormHeaderFields';
import withSettings from 'containers/Settings/withSettings';

/**
 * Payment made header form.
 */
function PaymentMadeFormHeader({
  // #withSettings
  baseCurrency,
}) {
  // Formik form context.
  const {
    values: { entries },
  } = useFormikContext();

  // Calculate the payment amount of the entries.
  const amountPaid = useMemo(() => sumBy(entries, 'payment_amount'), [entries]);

  return (
    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
      <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
        <PaymentMadeFormHeaderFields />

        <div className={classNames(CLASSES.PAGE_FORM_HEADER_BIG_NUMBERS)}>
          <div class="big-amount">
            <span class="big-amount__label">
              <T id={'amount_received'} />
            </span>
            <h1 class="big-amount__number">
              <Money amount={amountPaid} currency={baseCurrency} />
            </h1>
          </div>
        </div>
      </div>
    </div>
  );
}

export default compose(
  withSettings(({ organizationSettings }) => ({
    baseCurrency: organizationSettings?.baseCurrency,
  })),
)(PaymentMadeFormHeader);
