import * as React from 'react';
import { inject } from 'mobx-react';
import SEO from 'utils/SEO';
import { withTranslation, WithTranslation } from 'utils/i18n';
import { ContainerDeprecated, DefaultError } from '@nova-hf/ui';

import Hero from 'containers/hero/Hero';
import Wrapper from 'components/app-layout/Wrapper';

import InvoiceQuery from 'graphql/queries/invoices';

import InvoicesContainer from './containers/invoices/InvoicesContainer';
import { InvoiceList } from './containers/components/invoice-list/InvoiceList';
import { InvoiceBoxItemLoading } from './containers/components/invoice-list/InvoiceBoxItemLoading';

const VIEW = 'box';

interface IReikningarProps extends WithTranslation {
  ui?: any;
}

@inject('ui')
class Reikningar extends React.Component<IReikningarProps> {
  static async getInitialProps() {
    return { namespacesRequired: ['common', 'invoices'] };
  }

  render() {
    const { t, ui: { pageColor } } = this.props;
    const color = pageColor;

    return (
      <Wrapper>
        <SEO title={t('invoices')} />
        <Hero title={t('invoices')} color={pageColor} />
        <ContainerDeprecated underBar withStickyBar row>
          <InvoiceQuery
            errorPolicy="ignore"
          >
            {(props) => {
              const { loading, error, data } = props;

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

              if (loading) {
                return (<InvoiceList color={color} >
                  <InvoiceBoxItemLoading color={color} />
                  <InvoiceBoxItemLoading color={color} />
                  <InvoiceBoxItemLoading color={color} />
                  <InvoiceBoxItemLoading color={color} />
                </InvoiceList>);
              }

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

              const { me: { claims, invoices } } = data;

              return (
                <InvoicesContainer
                  color={color}
                  claimsList={claims}
                  invoices={invoices}
                  loading={loading}
                  view={VIEW}
                />
              );
            }}
          </InvoiceQuery>
        </ContainerDeprecated>
      </Wrapper>
    );
  }
}

export default withTranslation(['invoices', 'common'])(Reikningar);