import * as React from 'react';
import { Box, ContainerDeprecated, DefaultError, NotificationBanner } from '@nova-hf/ui';
import TransactionsQuery from 'graphql/queries/transactions';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'next/router';
import { WithTranslation, withTranslation } from 'utils/i18n';

import {
  ITransactionTableHeaders,
  TransactionList,
} from '../components/transaction-list/TransactionList';
import { TransactionListItemLoading } from '../components/transaction-list/TransactionListItemLoading';
import FilterBarContainer from '../filter-bar/FilterBarContainer';
import TransactionsContainer from '../transactions/TransactionsContainer';

const PER_PAGE = 50;

interface ITransactionsProps extends WithTranslation {
  color: string;
  from: string;
  to: string;
  page: string;
  profiles?: any;
}

class Transactions extends React.Component<ITransactionsProps> {
  get headers(): ITransactionTableHeaders {
    const { t, profiles } = this.props;

    return {
      date: t('date'),
      pdf: t('pdf'),
      attachment: t('attachment'),
      description: t('description'),
      amount: t('amount'),
      remaining: t('remaining'),
      sgm: profiles.isCompany ? t('status') : `${t('status')} ${t('sgm')}`,
      chooseAll: t('chooseAll'),
    };
  }

  render() {
    const { t } = this.props;
    const { color, from, to, page } = this.props;

    return (
      <TransactionsQuery variables={{ from, to, page, perPage: PER_PAGE }}>
        {(props) => {
          const { loading, error, data } = props;

          if (error) {
            return <DefaultError />;
          }

          if (loading) {
            return (
              <ContainerDeprecated underBar withStickyBar>
                <TransactionList color={color} headers={this.headers}>
                  <TransactionListItemLoading color={color} />
                  <TransactionListItemLoading color={color} />
                  <TransactionListItemLoading color={color} />
                  <TransactionListItemLoading color={color} />
                  <TransactionListItemLoading color={color} />
                </TransactionList>
              </ContainerDeprecated>
            );
          }

          if (!data || !data.me) {
            return (
              <ContainerDeprecated underBar withStickyBar>
                <div>{t('common:query.missingData')}</div>
              </ContainerDeprecated>
            );
          }

          const {
            me: {
              ssn,
              transactions: { accountTransaction, pageInfo },
            },
          } = data;

          return (
            <>
              <FilterBarContainer color={color} from={from} to={to} ssn={ssn} />
              <ContainerDeprecated underBar withStickyBar>
                <TransactionsContainer
                  perPage={PER_PAGE}
                  totalCount={pageInfo.totalCount}
                  transactions={accountTransaction}
                  color={color}
                  ssn={ssn}
                  tableHeaders={this.headers}
                />
              </ContainerDeprecated>
            </>
          );
        }}
      </TransactionsQuery>
    );
  }
}
export default withTranslation(['transactions', 'common'])(
  withRouter(inject('profiles')(observer(Transactions))),
);