import * as React from 'react';
import Wrapper from 'components/app-layout/Wrapper';
import Hero from 'containers/hero/Hero';
import { endOfDay, startOfYear } from 'date-fns';
import { inject } from 'mobx-react';
import { IContext } from 'typings/context';
import { useTranslation } from 'utils/i18n';
import SEO from 'utils/SEO';

import Transactions from './containers/transactions/Transactions';

interface IHreyfingalistiProps {
  ui?: any;
  query: any;
  page: number;
  from: string;
  to: string;
}

const Hreyfingalisti = ({ from, to, page, ui: { pageColor } }: IHreyfingalistiProps) => {
  const { t } = useTranslation('common');

  return (
    <Wrapper>
      <SEO title={t('transactionList')} />
      <Hero title={t('transactionList')} color={pageColor} />
      <Transactions from={from} to={to} page={page} color={pageColor} />
    </Wrapper>
  );
};

Hreyfingalisti.getInitialProps = ({ query }: IContext) => {
  const { page, from, to } = query;

  return {
    page: parseInt(page as string, 10),
    from: from || startOfYear(new Date()),
    to: to || endOfDay(new Date()),
    namespacesRequired: ['common', 'transactions'],
  };
};

export default inject('ui')(Hreyfingalisti);