fints4k/SampleApplications/WebApp/src/main/kotlin/AccountTransactionsView.kt

import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.launch
import net.dankito.banking.client.model.AccountTransaction
import net.dankito.banking.fints.model.TanChallenge
import react.*
import react.dom.*
import styled.styledDiv

external interface AccountTransactionsViewProps : Props {
  var presenter: Presenter
}

data class AccountTransactionsViewState(val balance: String, val transactions: Collection<AccountTransaction>, var showTransferMoneyView: Boolean = false,
                                        val enterTanChallenge: TanChallenge? = null) : State

@JsExport
class AccountTransactionsView(props: AccountTransactionsViewProps) : RComponent<AccountTransactionsViewProps, AccountTransactionsViewState>(props) {


  init {
    state = AccountTransactionsViewState("", listOf())

    props.presenter.enterTanCallback = { setState(AccountTransactionsViewState(state.balance, state.transactions, state.showTransferMoneyView, it)) }

    // due to CORS your bank's servers can not be requested directly from browser -> set a CORS proxy url in main.kt
    // TODO: set your credentials here
    GlobalScope.launch {
      props.presenter.retrieveAccountData("", "", "") { response ->
        response.customerAccount?.let { customer ->
          val balance = customer.accounts.sumOf { it.balance?.amount?.string?.replace(',', '.')?.toDoubleOrNull() ?: 0.0 } // i know, double is not an appropriate data type for amounts

          setState(AccountTransactionsViewState(balance.toString() + " " + (customer.accounts.firstOrNull()?.balance?.currency ?: ""), customer.accounts.flatMap { it.bookedTransactions }, state.enterTanChallenge))
        }
      }
    }
  }

  override fun RBuilder.render() {
    state.enterTanChallenge?.let { challenge ->
      child(EnterTanView::class) {
        attrs {
          presenter = props.presenter
          tanChallenge = challenge
        }
      }
    }

    button {
      span { +"Transfer Money" }
      attrs {
        onMouseUp = { setState { showTransferMoneyView = !showTransferMoneyView } }
      }
    }

    if (state.showTransferMoneyView) {
      child(TransferMoneyView::class) {
        attrs {
          presenter = props.presenter
        }
      }
    }

    p {
      +"Saldo: ${state.balance}"
    }

    div {
      state.transactions.forEach { transaction ->
        div {
          styledDiv {
            if (transaction.showOtherPartyName) {
              div { transaction.otherPartyName }
            }

            div {
              +transaction.reference
            }
          }
        }
      }
    }
  }
}