import * as React from 'react';
import { observable, makeObservable } from 'mobx';
import { inject, observer } from 'mobx-react';
import { IClaim } from 'typings';

import { formatDate } from 'utils/helpers';
import { WithTranslation, withTranslation } from 'utils/i18n';

import Wrapper from 'components/app-layout/Wrapper';
import { CompletedMessage, Receipt, Summary, SummaryItem, ContainerDeprecated } from '@nova-hf/ui';

interface ITakkProps extends WithTranslation {
  ui?: any;
  claims: any;
}
class Takk extends React.Component<ITakkProps> {
  render() {
    const {
      claims: { transaction, selectedClaims },
      t,
      ui: { pageColor },
    } = this.props;

    return (
      <Wrapper header="dark">
        <CompletedMessage
          subtitle={t('claims.payClaims')}
          title={[t('claims.thankYou'), t('claims.paymentSuccess')]}
          color={pageColor}
          buttonText={t('claims.back')}
          to="/reikningar"
        />
        <ContainerDeprecated col>
          {transaction && (
            <Receipt
              authCode={transaction.authorizationCode}
              timeOfPurchase={formatDate(transaction.date as Date, 'd. MMMM yyyy')}
              errorMessage={transaction.message}
              color={pageColor}
            >
              <Summary nowTotal={transaction.amount} showZeroPrice itemHeader={t('invoices')}>
                {selectedClaims &&
                  selectedClaims.map((claim: IClaim) => (
                    <SummaryItem
                      key={claim.claimNumber}
                      title={formatDate(claim.dueDate, 'd. MMMM yyyy')}
                      priceNow={claim.totalCharge}
                      showTotalValue
                    />
                  ))}
              </Summary>
            </Receipt>
          )}
        </ContainerDeprecated>
      </Wrapper>
    );
  }
}

Takk.getInitialProps = () => {
  return {
    namespacesRequired: ['common'],
  };
};

export default withTranslation('invoices')(inject('claims', 'ui')(observer(Takk)));