import { action, observable, runInAction } from 'mobx';
import * as React from 'react';
import { Inject, Injectable } from 'utils/di';
import { PaymentListResponse } from './models';
import { PaymentTransportService } from './PaymentTransportService';

@Injectable
export class PaymentStore extends React.Component {
  @Inject(PaymentTransportService) PaymentTransportService: PaymentTransportService
  private transport: PaymentTransportService = new PaymentTransportService()
  @observable paymentList: PaymentListResponse | null
  @observable pageNext: number | null = 1

  @action
  dropStore(): void {
    this.paymentList = null
  }

  @action
  async loadData() {
    if (this.paymentList && this.paymentList.results) {
      return
    }
    const _paymentList: PaymentListResponse = new PaymentListResponse()

    while (this.pageNext) {
      const params = {
        page_size: 1,
        page: this.pageNext
      }

      await this.transport.retrievePaymentList(params).then((paymentList: PaymentListResponse) => {
        _paymentList.results = _paymentList.results.concat(paymentList.results)
        this.pageNext = paymentList.pageNext
      })
    }

    runInAction(() => {
      this.paymentList = _paymentList
    })
    console.log('NENF')
  }
}