import * as React from 'react';
import gql from 'graphql-tag';
import { inject } from 'mobx-react';

import { IMeQueryProps, MeQuery } from './types';

const TRANSACTIONS = gql`
  query transactionsQuery($from: Date!, $to: Date!, $page: Int, $perPage: Int, $accountInput: AccountInput) {
    me(input: $accountInput) {
      ssn
      transactions(input: { from: $from, to: $to, page: $page, perPage: $perPage }) {
        pageInfo {
          totalCount
        }
        accountTransaction {
          amount
          balance
          date
          dueDate
          remainder
          transactionId
          description
          voucherType
          voucherNumber
          pdfUrl
        }
      }
    }
  }
`;

@inject('authentication')
export default class Query extends React.Component<IMeQueryProps> {
  render() {
    const { authentication: { accountInput }, variables, children, ...rest } = this.props;

    return (
      <MeQuery query={TRANSACTIONS} variables={{ accountInput, ...variables }} {...rest}>
        {result => children(result)}
      </MeQuery>
    );
  }
}