/* eslint-disable @typescript-eslint/no-explicit-any */
import useSWR, { SWRConfig as _SWRConfig, useSWRConfig } from 'swr';
import { h, Fragment, VNode, createContext } from 'preact';
import { useRef, useState, useEffect, StateUpdater, useContext } from 'preact/hooks';
import { Buffer } from 'buffer';
import { useTranslator, Translate } from '../../i18n';
import { QR } from '../../components/QR';
import { useNotNullLocalStorage, useLocalStorage } from '../../hooks';
import '../../scss/main.scss';
import talerLogo from '../../assets/logo-white.svg';
import { LangSelectorLikePy as LangSelector } from '../../components/menu/LangSelector';

// FIXME: Fix usages of SWRConfig, doing this isn't the best practice (but hey, it works for now)
const SWRConfig = _SWRConfig as any;

const UI_ALLOW_REGISTRATIONS = ('__LIBEUFIN_UI_ALLOW_REGISTRATIONS__') ?? 1;
const UI_IS_DEMO = ('__LIBEUFIN_UI_IS_DEMO__') ?? 0;
const UI_BANK_NAME = ('__LIBEUFIN_UI_BANK_NAME__') ?? 'Taler Bank';

/**
 * FIXME:
 *
 * - INPUT elements have their 'required' attribute ignored.
 *
 * - the page needs a "home" button that either redirects to
 *   the profile page (when the user is logged in), or to
 *   the very initial home page.
 *
 * - histories 'pages' are grouped in UL elements that cause
 *   the rendering to visually separate each UL.  History elements
 *   should instead line up without any separation caused by
 *   a implementation detail.
 *
 * - Many strings need to be i18n-wrapped.
 */

/***********
 * Globals *
 **********/

/************
 * Contexts *
 ***********/
const CurrencyContext = createContext<any>(null);
const PageContext = createContext<any>(null);

/**********************************************
 * Type definitions for states and API calls. *
 *********************************************/

/**
 * Has the information to reach and
 * authenticate at the bank's backend.
 */
interface BackendStateType {
  url: string;
  username: string;
  password: string;
}

/**
 * Request body of POST /transactions.
 *
 * If the amount appears twice: both as a Payto parameter and
 * in the JSON dedicate field, the one on the Payto URI takes
 * precedence.
 */
interface TransactionRequestType {
  paytoUri: string;
  amount?: string; // with currency.
}

/**
 * Request body of /register.
 */
interface CredentialsRequestType {
  username: string;
  password: string;
}

/**
 * Request body of /register.
 */
interface LoginRequestType {
  username: string;
  password: string;
}

interface WireTransferRequestType {
  iban: string;
  subject: string;
  amount: string;
}

interface Amount {
  value: string;
  currency: string;
}

/**
 * Track page state.
 */
interface PageStateType {
  isLoggedIn: boolean;
  isRawPayto: boolean;
  tryRegister: boolean;
  showPublicHistories: boolean;
  hasError: boolean;
  hasInfo: boolean;
  withdrawalInProgress: boolean;
  error?: string;
  info?: string;
  talerWithdrawUri?: string;
  /**
   * Not strictly a presentational value, could
   * be moved in a future "withdrawal state" object.
   */
  withdrawalId?: string;
}

/**
 * Bank account specific information.
 */
interface AccountStateType {
  balance: string;
  /* FIXME: Need history here.  */
}

/************
 * Helpers. *
 ***********/

function maybeDemoContent(content: VNode) {
  if (UI_IS_DEMO) return content;
}

async function fetcher(url: string) {
  return fetch(url).then((r) => (r.json()));
}

function genCaptchaNumbers(): string {
  return `${Math.floor(Math.random() * 10)} + ${Math.floor(Math.random() * 10)}`;
}
/**
 * Bring the state to show the public accounts page.
 */
function goPublicAccounts(pageStateSetter: StateUpdater<PageStateType>) {
  return () => pageStateSetter((prevState) => ({ ...prevState, showPublicHistories: true }))
}

/**
 * Validate (the number part of) an amount.  If needed,
 * replace comma with a dot.  Returns 'false' whenever
 * the input is invalid, the valid amount otherwise.
 */
function validateAmount(maybeAmount: string): any {
  const amountRegex = '^[0-9]+(\.[0-9]+)?$';
  if (!maybeAmount) {
    console.log(`Entered amount (${maybeAmount}) mismatched <input> pattern.`);
    return;
  }
  if (typeof maybeAmount !== 'undefined' || maybeAmount !== '') {
    console.log(`Maybe valid amount: ${maybeAmount}`);
    // tolerating comma instead of point.
    const re = RegExp(amountRegex)
    if (!re.test(maybeAmount)) {
      console.log(`Not using invalid amount '${maybeAmount}'.`);
      return false;
    }
  }
  return maybeAmount;
}

/**
 * Extract IBAN from a Payto URI.
 */
function getIbanFromPayto(url: string): string {
  const pathSplit = new URL(url).pathname.split('/');
  let lastIndex = pathSplit.length - 1;
  // Happens if the path ends with "/".
  if (pathSplit[lastIndex] === '') lastIndex--;
  const iban = pathSplit[lastIndex];
  return iban;
}

/**
 * Extract value and currency from a $currency:x.y amount.
 */
function parseAmount(val: string): Amount {
  const format = /^[A-Z]+:[0-9]+(\.[0-9]+)?$/;
  if (!format.test(val))
    throw Error(`Backend gave invalid amount: ${val}.`)
  const amountSplit = val.split(':');
  return { value: amountSplit[1], currency: amountSplit[0] }
}

/**
 * Get username from the backend state, and throw
 * exception if not found.
 */
function getUsername(backendState: BackendStateTypeOpt): string {
  if (typeof backendState === 'undefined')
    throw Error('Username can\'t be found in a undefined backend state.')

  return backendState.username;
}

/**
 * Helps extracting the credentials from the state
 * and wraps the actual call to 'fetch'.  Should be
 * enclosed in a try-catch block by the caller.
 */
async function postToBackend(
  uri: string,
  backendState: BackendStateTypeOpt,
  body: string
): Promise<any> {
  if (typeof backendState === 'undefined')
    throw Error('Credentials can\'t be found in a undefined backend state.')

  const { username, password } = backendState;
  const headers = prepareHeaders(username, password);
  // Backend URL must have been stored _with_ a final slash.
  const url = new URL(uri, backendState.url)
  return await fetch(url.href, {
    method: 'POST',
    headers,
    body,
  }
  );
}

function useTransactionPageNumber(): [number, StateUpdater<number>] {
  const ret = useNotNullLocalStorage('transaction-page', '0');
  const retObj = JSON.parse(ret[0]);
  const retSetter: StateUpdater<number> = function (val) {
    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
    ret[1](newVal)
  }
  return [retObj, retSetter];
}

/**
 * Craft headers with Authorization and Content-Type.
 */
function prepareHeaders(username: string, password: string) {
  const headers = new Headers();
  headers.append(
    'Authorization',
    `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`
  );
  headers.append(
    'Content-Type',
    'application/json'
  )
  return headers;
}

// Window can be mocked this way:
// https://gist.github.com/theKashey/07090691c0a4680ed773375d8dbeebc1#file-webpack-conf-js
// That allows the app to be pointed to a arbitrary
// euFin backend when launched via "pnpm dev".
const getRootPath = () => {
  const maybeRootPath = typeof window !== undefined
    ? window.location.origin + window.location.pathname
    : '/';
  if (!maybeRootPath.endsWith('/')) return `${maybeRootPath}/`;
  return maybeRootPath;
};

/*******************
 * State managers. *
 ******************/

/**
 * Stores in the state a object containing a 'username'
 * and 'password' field, in order to avoid losing the
 * handle of the data entered by the user in <input> fields.
 */
function useShowPublicAccount(
  state?: string
): [string | undefined, StateUpdater<string | undefined>] {

  const ret = useLocalStorage('show-public-account', JSON.stringify(state));
  const retObj: string | undefined = ret[0] ? JSON.parse(ret[0]) : ret[0];
  const retSetter: StateUpdater<string | undefined> = function (val) {
    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
    ret[1](newVal)
  }
  return [retObj, retSetter]
}

/**
 * Stores the raw Payto value entered by the user in the state.
 */
type RawPaytoInputType = string;
type RawPaytoInputTypeOpt = RawPaytoInputType | undefined;
function useRawPaytoInputType(
  state?: RawPaytoInputType
): [RawPaytoInputTypeOpt, StateUpdater<RawPaytoInputTypeOpt>] {

  const ret = useLocalStorage('raw-payto-input-state', state);
  const retObj: RawPaytoInputTypeOpt = ret[0];
  const retSetter: StateUpdater<RawPaytoInputTypeOpt> = function (val) {
    const newVal = val instanceof Function ? val(retObj) : val
    ret[1](newVal)
  }
  return [retObj, retSetter]
}

/**
 * Stores in the state a object representing a wire transfer,
 * in order to avoid losing the handle of the data entered by
 * the user in <input> fields.  FIXME: name not matching the
 * purpose, as this is not a HTTP request body but rather the
 * state of the <input>-elements.
 */
type WireTransferRequestTypeOpt = WireTransferRequestType | undefined;
function useWireTransferRequestType(
  state?: WireTransferRequestType
): [WireTransferRequestTypeOpt, StateUpdater<WireTransferRequestTypeOpt>] {

  const ret = useLocalStorage('wire-transfer-request-state', JSON.stringify(state));
  const retObj: WireTransferRequestTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
  const retSetter: StateUpdater<WireTransferRequestTypeOpt> = function (val) {
    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
    ret[1](newVal)
  }
  return [retObj, retSetter]
}

/**
 * Stores in the state a object containing a 'username'
 * and 'password' field, in order to avoid losing the
 * handle of the data entered by the user in <input> fields.
 */
type CredentialsRequestTypeOpt = CredentialsRequestType | undefined;
function useCredentialsRequestType(
  state?: CredentialsRequestType
): [CredentialsRequestTypeOpt, StateUpdater<CredentialsRequestTypeOpt>] {

  const ret = useLocalStorage('credentials-request-state', JSON.stringify(state));
  const retObj: CredentialsRequestTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
  const retSetter: StateUpdater<CredentialsRequestTypeOpt> = function (val) {
    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
    ret[1](newVal)
  }
  return [retObj, retSetter]
}

/**
 * Return getters and setters for
 * login credentials and backend's
 * base URL.
 */
type BackendStateTypeOpt = BackendStateType | undefined;
function useBackendState(
  state?: BackendStateType
): [BackendStateTypeOpt, StateUpdater<BackendStateTypeOpt>] {

  const ret = useLocalStorage('backend-state', JSON.stringify(state));
  const retObj: BackendStateTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
  const retSetter: StateUpdater<BackendStateTypeOpt> = function (val) {
    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
    ret[1](newVal)
  }
  return [retObj, retSetter]
}

/**
 * Keep mere business information, like account balance or
 * transactions history.
 */
type AccountStateTypeOpt = AccountStateType | undefined;
function useAccountState(
  state?: AccountStateType
): [AccountStateTypeOpt, StateUpdater<AccountStateTypeOpt>] {

  const ret = useLocalStorage('account-state', JSON.stringify(state));
  const retObj: AccountStateTypeOpt = ret[0] ? JSON.parse(ret[0]) : ret[0];
  const retSetter: StateUpdater<AccountStateTypeOpt> = function (val) {
    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
    ret[1](newVal)
  }
  return [retObj, retSetter]
}

/**
 * Wrapper providing defaults.
 */
function usePageState(
  state: PageStateType = {
    isLoggedIn: false,
    isRawPayto: false,
    tryRegister: false,
    showPublicHistories: false,
    hasError: false,
    hasInfo: false,
    withdrawalInProgress: false,
  }
): [PageStateType, StateUpdater<PageStateType>] {
  const ret = useNotNullLocalStorage('page-state', JSON.stringify(state));
  const retObj: PageStateType = JSON.parse(ret[0]);
  console.log('Current page state', retObj);
  const retSetter: StateUpdater<PageStateType> = function (val) {
    const newVal = val instanceof Function ? JSON.stringify(val(retObj)) : JSON.stringify(val)
    console.log('Setting new page state', newVal)
    ret[1](newVal)
  }
  return [retObj, retSetter];
}

/**
 * Request preparators.
 *
 * These functions aim at sanitizing the input received
 * from users - for example via a HTML form - and create
 * a HTTP request object out of that.
 */

/******************
 * HTTP wrappers. *
 *****************/

/**
 * A 'wrapper' is typically a function that prepares one
 * particular API call and updates the state accordingly.  */

/**
 * Abort a withdrawal operation via the Access API's /abort.
 */
async function abortWithdrawalCall(
  backendState: BackendStateTypeOpt,
  withdrawalId: string | undefined,
  pageStateSetter: StateUpdater<PageStateType>
) {
  if (typeof backendState === 'undefined') {
    console.log('No credentials found.');
    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials found.' }))
    return;
  }
  if (typeof withdrawalId === 'undefined') {
    console.log('No withdrawal ID found.');
    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No withdrawal ID found.' }))
    return;
  }
  let res:any;
  try {
    const { username, password } = backendState;
    const headers = prepareHeaders(username, password);
    /**
     * NOTE: tests show that when a same object is being
     * POSTed, caching might prevent same requests from being
     * made.  Hence, trying to POST twice the same amount might
     * get silently ignored.  Needs more observation!
     *
     * headers.append("cache-control", "no-store");
     * headers.append("cache-control", "no-cache");
     * headers.append("pragma", "no-cache");
     * */

    // Backend URL must have been stored _with_ a final slash.
    const url = new URL(
      `access-api/accounts/${backendState.username}/withdrawals/${withdrawalId}/abort`,
      backendState.url
    )
    res = await fetch(url.href, { method: 'POST', headers })
  } catch (error) {
    console.log('Could not abort the withdrawal', error);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: `Could not abort the withdrawal: ${error}`
    }))
    return;
  }
  if (!res.ok) {
    console.log(`Withdrawal abort gave response error (${res.status})`, res.statusText);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: `Withdrawal abortion gave response error (${res.status})`
    }))
    return;
  }
  console.log('Withdrawal operation aborted!');
  pageStateSetter((prevState) => {
    const { ...rest } = prevState;
    return {
      ...rest,
      info: 'Withdrawal aborted!'
    }
  })

}

/**
 * This function confirms a withdrawal operation AFTER
 * the wallet has given the exchange's payment details
 * to the bank (via the Integration API).  Such details
 * can be given by scanning a QR code or by passing the
 * raw taler://withdraw-URI to the CLI wallet.
 *
 * This function will set the confirmation status in the
 * 'page state' and let the related components refresh.
 */
async function confirmWithdrawalCall(
  backendState: BackendStateTypeOpt,
  withdrawalId: string | undefined,
  pageStateSetter: StateUpdater<PageStateType>
) {

  if (typeof backendState === 'undefined') {
    console.log('No credentials found.');
    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials found.' }))
    return;
  }
  if (typeof withdrawalId === 'undefined') {
    console.log('No withdrawal ID found.');
    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No withdrawal ID found.' }))
    return;
  }
  let res: Response;
  try {
    const { username, password } = backendState;
    const headers = prepareHeaders(username, password);
    /**
     * NOTE: tests show that when a same object is being
     * POSTed, caching might prevent same requests from being
     * made.  Hence, trying to POST twice the same amount might
     * get silently ignored.
     *
     * headers.append("cache-control", "no-store");
     * headers.append("cache-control", "no-cache");
     * headers.append("pragma", "no-cache");
     * */

    // Backend URL must have been stored _with_ a final slash.
    const url = new URL(
      `access-api/accounts/${backendState.username}/withdrawals/${withdrawalId}/confirm`,
      backendState.url
    )
    res = await fetch(url.href, {
      method: 'POST',
      headers
    })
  } catch (error) {
    console.log('Could not POST withdrawal confirmation to the bank', error);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: `Could not confirm the withdrawal: ${error}`
    }))
    return;
  }
  if (res ? !res.ok : true) { // assume not ok if res is null
    console.log(`Withdrawal confirmation gave response error (${res.status})`, res.statusText);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: `Withdrawal confirmation gave response error (${res.status})`
    }))
    return;
  }
  console.log('Withdrawal operation confirmed!');
  pageStateSetter((prevState) => {
    const { talerWithdrawUri, ...rest } = prevState;
    return {
      ...rest,
      info: 'Withdrawal confirmed!'
    }
  })

}

/**
 * This function creates a new transaction.  It reads a Payto
 * address entered by the user and POSTs it to the bank.  No
 * sanity-check of the input happens before the POST as this is
 * already conducted by the backend.
 */
async function createTransactionCall(
  req: TransactionRequestType,
  backendState: BackendStateTypeOpt,
  pageStateSetter: StateUpdater<PageStateType>,
  /**
   * Optional since the raw payto form doesn't have
   * a stateful management of the input data yet.
   */
  cleanUpForm: () => void
) {
  let res:any;
  try {
    res = await postToBackend(
      `access-api/accounts/${getUsername(backendState)}/transactions`,
      backendState,
      JSON.stringify(req)
    )
  }
  catch (error) {
    console.log('Could not POST transaction request to the bank', error);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: `Could not create the wire transfer: ${error}`
    }))
    return;
  }
  // POST happened, status not sure yet.
  if (!res.ok) {
    const responseText = JSON.stringify(await res.json());
    console.log(`Transfer creation gave response error: ${responseText} (${res.status})`);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: `Transfer creation gave response error: ${responseText} (${res.status})`
    }))
    return;
  }
  // status is 200 OK here, tell the user.
  console.log('Wire transfer created!');
  pageStateSetter((prevState) => ({
    ...prevState,
    hasInfo: true,
    info: 'Wire transfer created!'
  }))

  // Only at this point the input data can
  // be discarded.
  cleanUpForm();
}

/**
 * This function creates a withdrawal operation via the Access API.
 *
 * After having successfully created the withdrawal operation, the
 * user should receive a QR code of the "taler://withdraw/" type and
 * supposed to scan it with their phone.
 *
 * TODO: (1) after the scan, the page should refresh itself and inform
 * the user about the operation's outcome.  (2) use POST helper.  */
async function createWithdrawalCall(
  amount: string,
  backendState: BackendStateTypeOpt,
  pageStateSetter: StateUpdater<PageStateType>
) {
  if (typeof backendState === 'undefined') {
    console.log('Page has a problem: no credentials found in the state.');
    pageStateSetter((prevState) => ({ ...prevState, hasError: true, error: 'No credentials given.' }))
    return;
  }

  let res:any;
  try {
    const { username, password } = backendState;
    const headers = prepareHeaders(username, password);

    // Let bank generate withdraw URI:
    const url = new URL(
      `access-api/accounts/${backendState.username}/withdrawals`,
      backendState.url
    )
    res = await fetch(url.href, {
      method: 'POST',
      headers,
      body: JSON.stringify({ amount }),
    }
    );
  } catch (error) {
    console.log('Could not POST withdrawal request to the bank', error);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: `Could not create withdrawal operation: ${error}`
    }))
    return;
  }
  if (!res.ok) {
    const responseText = await res.text();
    console.log(`Withdrawal creation gave response error: ${responseText} (${res.status})`);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: `Withdrawal creation gave response error: ${responseText} (${res.status})`
    }))
    return;
  }

  console.log('Withdrawal operation created!');
  const resp = await res.json();
  pageStateSetter((prevState: PageStateType) => ({
    ...prevState,
    withdrawalInProgress: true,
    talerWithdrawUri: resp.taler_withdraw_uri,
    withdrawalId: resp.withdrawal_id
  }))
}

async function loginCall(
  req: CredentialsRequestType,
  /**
   * FIXME: figure out if the two following
   * functions can be retrieved from the state.
   */
  backendStateSetter: StateUpdater<BackendStateTypeOpt>,
  pageStateSetter: StateUpdater<PageStateType>
) {

  /**
   * Optimistically setting the state as 'logged in', and
   * let the Account component request the balance to check
   * whether the credentials are valid.  */
  pageStateSetter((prevState) => ({ ...prevState, isLoggedIn: true }));
  let baseUrl = getRootPath();
  if (!baseUrl.endsWith('/'))
    baseUrl += '/';

  backendStateSetter((prevState) => ({
    ...prevState,
    url: baseUrl,
    username: req.username,
    password: req.password,
  }));
}


/**
 * This function requests /register.
 *
 * This function is responsible to change two states:
 * the backend's (to store the login credentials) and
 * the page's (to indicate a successful login or a problem).
 */
async function registrationCall(
  req: CredentialsRequestType,
  /**
   * FIXME: figure out if the two following
   * functions can be retrieved somewhat from
   * the state.
   */
  backendStateSetter: StateUpdater<BackendStateTypeOpt>,
  pageStateSetter: StateUpdater<PageStateType>
) {

  let baseUrl = getRootPath();
  /**
   * If the base URL doesn't end with slash and the path
   * is not empty, then the concatenation made by URL()
   * drops the last path element.
   */
  if (!baseUrl.endsWith('/'))
    baseUrl += '/'

  const headers = new Headers();
  headers.append(
    'Content-Type',
    'application/json'
  )
  const url = new URL('access-api/testing/register', baseUrl)
  let res:any;
  try {
    res = await fetch(url.href, {
      method: 'POST',
      body: JSON.stringify(req),
      headers
    });
  } catch (error) {
    console.log(`Could not POST new registration to the bank (${url.href})`, error);
    pageStateSetter((prevState) => ({
      ...prevState, hasError: true, error: 'Registration failed, please report.'
    }));
    return;
  }
  if (!res.ok) {
    const errorRaw = await res.text();
    console.log(`New registration gave response error (${res.status})`, errorRaw);
    pageStateSetter((prevState) => ({
      ...prevState,
      hasError: true,
      error: errorRaw
    }));
  } else {
    pageStateSetter((prevState) => ({
      ...prevState,
      isLoggedIn: true,
      tryRegister: false
    }));
    backendStateSetter((prevState) => ({
      ...prevState,
      url: baseUrl,
      username: req.username,
      password: req.password,
    }));
  }
}

/**************************
 * Functional components. *
 *************************/

function Currency(): VNode {
  const { data, error } = useSWR(`${getRootPath()}integration-api/config`, fetcher);
  if (typeof error !== 'undefined')
    return <b>error: currency could not be retrieved</b>;

  if (typeof data === 'undefined') return <Fragment>"..."</Fragment>;
  console.log('found bank config', data);
  return data.currency;
}

function ErrorBanner(Props: any): VNode | null {
  const [pageState, pageStateSetter] = Props.pageState;
  const i18n = useTranslator();
  if (!pageState.hasError) return null;

  const rval = (
    <p class="informational informational-fail">{pageState.error}
    </p>);
  delete pageState.error;
  pageState.hasError = false;
  return rval;
}

function StatusBanner(Props: any): VNode | null {
  const [pageState, pageStateSetter] = Props.pageState;
  const i18n = useTranslator();
  if (!pageState.hasInfo) return null;

  const rval = (
    <p class="informational">{pageState.error}
    </p>);
  delete pageState.info_msg;
  pageState.hasInfo = false;
  return rval;
}

function BankFrame(Props: any): VNode {
  const i18n = useTranslator();
  const [pageState, pageStateSetter] = useContext(PageContext);
  console.log('BankFrame state', pageState);
  const logOut = (
    <div class="logout">
      <a
        href="#"
        class="pure-button logout-button"
        onClick={() => {
          pageStateSetter((prevState: PageStateType) => {
            const {
              talerWithdrawUri,
              withdrawalId, ...rest } = prevState;
            return {
              ...rest,
              isLoggedIn: false,
              withdrawalInProgress: false,
              hasInfo: false,
              hasError: false,
              isRawPayto: false
            };
          });
        }}>{i18n`Logout`}</a></div>);

  // Prepare demo sites links.
  const DEMO_SITES = [
    ['Landing', '__DEMO_SITE_LANDING_URL__'],
    ['Bank', '__DEMO_SITE_BANK_URL__'],
    ['Essay Shop', '__DEMO_SITE_BLOG_URL__'],
    ['Donations', '__DEMO_SITE_DONATIONS_URL__'],
    ['Survey', '__DEMO_SITE_SURVEY_URL__'],
  ];
  const demo_sites = [];
  for (const i in DEMO_SITES)
    demo_sites.push(<a href={DEMO_SITES[i][1]}>{DEMO_SITES[i][0]}</a>)

  return (
    <Fragment>
      <header class="demobar" style="display: flex; flex-direction: row; justify-content: space-between;">
        <a href="#main" class="skip">{i18n`Skip to main content`}</a>
        <div style="max-width: 50em; margin-left: 2em;">
          <h1>
            <span class="it">
              <a href="/">{
                UI_BANK_NAME
              }
              </a>
            </span>
          </h1>{
            maybeDemoContent(<p><Translate>
              This part of the demo shows how a bank that supports
              Taler directly would work. In addition to using your own
              bank account, you can also see the transaction history of
              some <a href="#" onClick={goPublicAccounts(pageStateSetter)}>Public Accounts</a>.
            </Translate></p>
            )
          }
        </div>
        <a href="https://taler.net/">
          <img
            src={talerLogo}
            alt="{i18n`Taler logo`}"
            height="100"
            width="224"
            style="margin: 2em 2em" />
        </a>
      </header>
      <div style="display:flex; flex-direction: column;" class="navcontainer">
        <nav class="demolist">
          {maybeDemoContent(<Fragment>{demo_sites}</Fragment>)}
          <div class="right">
            <LangSelector />
          </div>
        </nav>
      </div>
      <section id="main" class="content">
        <ErrorBanner pageState={[pageState, pageStateSetter]} />
        <StatusBanner pageState={[pageState, pageStateSetter]} />
        {pageState.isLoggedIn ? logOut : null}
        {Props.children}
      </section>
      <section id="footer" class="footer">
        <div class="footer">
          <hr />
          <div>
            <p>You can learn more about GNU Taler on our <a href="https://taler.net">main website</a>.</p>
          </div>
          <div style="flex-grow:1" />
          <p>Copyright &copy; 2014&mdash;2022 Taler Systems SA</p>
        </div>
      </section>
    </Fragment>);
}


function PaytoWireTransfer(Props: any): VNode {
  const currency = useContext(CurrencyContext);
  const [pageState, pageStateSetter] = useContext(PageContext); // NOTE: used for go-back button?
  const [submitData, submitDataSetter] = useWireTransferRequestType();
  const [rawPaytoInput, rawPaytoInputSetter] = useRawPaytoInputType();
  const i18n = useTranslator();
  const { focus, backendState } = Props
  const amountRegex = '^[0-9]+(\.[0-9]+)?$';
  const ibanRegex = '^[A-Z][A-Z][0-9]+$';
  const receiverInput = '';
  const subjectInput = '';
  let transactionData: TransactionRequestType;
  const ref = useRef<HTMLInputElement>(null)
  useEffect(() => {
    if (focus) ref.current?.focus();
  }, [focus, pageState.isRawPayto]);

  if (!pageState.isRawPayto)
    return (
      <div>
        <div class="pure-form"
          name="wire-transfer-form">
          <p>
            <label for="iban">{i18n`Receiver IBAN:`}</label>&nbsp;
            <input
              ref={ref}
              type="text"
              id="iban"
              name="iban"
              value={submitData?.iban}
              placeholder="CC0123456789"
              required
              pattern={ibanRegex}
              onInput={(e): void => {
                submitDataSetter((submitData: any) => ({
                  ...submitData,
                  iban: e.currentTarget.value,
                }))
              }} /><br /><br />
            <label for="subject">{i18n`Transfer subject:`}</label>&nbsp;
            <input
              type="text"
              name="subject"
              id="subject"
              placeholder="subject"
              value={submitData?.subject}
              required
              onInput={(e): void => {
                submitDataSetter((submitData: any) => ({
                  ...submitData,
                  subject: e.currentTarget.value,
                }))
              }} /><br /><br />
            <label for="amount">{i18n`Amount:`}</label>&nbsp;
            <input
              type="number"
              name="amount"
              id="amount"
              placeholder="amount"
              required
              value={submitData?.amount}
              pattern={amountRegex}
              onInput={(e): void => {
                submitDataSetter((submitData: any) => ({
                  ...submitData,
                  amount: e.currentTarget.value.replace(',', '.'),
                }))
              }} />
            &nbsp;
            <input
              type="text"
              readonly
              class="currency-indicator"
              size={currency.length}
              maxLength={currency.length}
              tabIndex={-1} value={currency} />
          </p>
          <p>
            <input
              type="submit"
              class="pure-button pure-button-primary"
              value="Send"
              onClick={async () => {
                if (
                  typeof submitData === 'undefined'
                  || (typeof submitData.iban === 'undefined'
                    || submitData.iban === '')
                  || (typeof submitData.subject === 'undefined'
                    || submitData.subject === '')
                  || (typeof submitData.amount === 'undefined'
                    || submitData.amount === '')
                ) {
                  console.log('Not all the fields were given.');
                  pageStateSetter((prevState: PageStateType) =>
                    ({ ...prevState, hasError: true, error: i18n`Field(s) missing.` }))
                  return;
                }
                transactionData = {
                  paytoUri: `payto://iban/${submitData.iban}?message=${encodeURIComponent(submitData.subject)}`,
                  amount: `${currency}:${submitData.amount}`
                };
                return await createTransactionCall(
                  transactionData,
                  backendState,
                  pageStateSetter,
                  () => submitDataSetter(p => ({
                    amount: '',
                    iban: '',
                    subject: ''
                  }))
                );
              }} />
          </p>
        </div>
        <p><a
          href="#"
          onClick={() => {
            console.log('switch to raw payto form');
            pageStateSetter((prevState: any) => ({ ...prevState, isRawPayto: true }));
          }}>{i18n`Want to try the raw payto://-format?`}
        </a></p>
      </div>
    );

  return (
    <div>
      <p>
        {i18n`Transfer money to account identified by payto:// URI:`}
      </p>
      <div class="pure-form"
        name="payto-form">
        <p>
          <label for="address">{i18n`payto URI:`}</label>&nbsp;
          <input
            name="address"
            type="text"
            size={90}
            ref={ref}
            id="address"
            value={rawPaytoInput}
            required
            placeholder={i18n`payto address`}
            pattern={`payto://iban/[A-Z][A-Z][0-9]+\?message=[a-zA-Z0-9 ]+&amount=${currency}:[0-9]+(\.[0-9]+)?`}
            onInput={(e): void => {
              rawPaytoInputSetter(e.currentTarget.value)
            }} />
          <br />
          <div class="hint">
            Hint:
            <code>
              payto://iban/[receiver-iban]?message=[subject]&amount=[{currency}:X.Y]
            </code>
          </div>
        </p>
        <p>
          <input class="pure-button pure-button-primary"
            type="submit"
            value={i18n`Send`}
            onClick={async () => {
              // empty string evaluates to false.
              if (!rawPaytoInput) {
                console.log('Didn\'t get any raw Payto string!');
                return;
              }
              transactionData = { paytoUri: rawPaytoInput };
              if (typeof transactionData.paytoUri === 'undefined' ||
                transactionData.paytoUri.length === 0) return;

              return await createTransactionCall(
                transactionData,
                backendState,
                pageStateSetter,
                () => rawPaytoInputSetter(p => '')
              );
            }} />
        </p>
        <p><a
          href="#"
          onClick={() => {
            console.log('switch to wire-transfer-form');
            pageStateSetter((prevState: any) => ({ ...prevState, isRawPayto: false }));
          }}>{i18n`Use wire-transfer form?`}
        </a></p>
      </div>
    </div>);
}

/**
 * Additional authentication required to complete the operation.
 * Not providing a back button, only abort.
 */
function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
  const [pageState, pageStateSetter] = useContext(PageContext);
  const { backendState } = Props;
  const i18n = useTranslator();
  const captchaNumbers = {
    a: Math.floor(Math.random() * 10),
    b: Math.floor(Math.random() * 10)
  }
  let captchaAnswer = '';

  return (<Fragment>
    <h1 class="nav">{i18n`Confirm Withdrawal`}</h1>
    <article>
      <div class="challenge-div">
        <form class="challenge-form">
          <div class="pure-form"
            id="captcha"
            name="capcha-form">
            <h2>{i18n`Authorize withdrawal by solving challenge`}</h2>
            <p>
              <label for="answer">{i18n`What is`}&nbsp;<em>{captchaNumbers.a}&nbsp;+&nbsp;{captchaNumbers.b}</em>?&nbsp;</label>&nbsp;
              <input
                name="answer"
                id="answer"
                type="text"
                required
                onInput={(e): void => {
                  captchaAnswer = e.currentTarget.value;
                }} />
            </p>
            <p>
              <button
                class="pure-button pure-button-primary btn-confirm"
                onClick={() => {
                  if (captchaAnswer == (captchaNumbers.a + captchaNumbers.b).toString()) {
                    confirmWithdrawalCall(
                      backendState,
                      pageState.withdrawalId,
                      pageStateSetter)
                    return;
                  }
                  pageStateSetter((prevState: PageStateType) =>
                    ({ ...prevState, hasError: true, error: i18n`Answer is wrong.` }))
                }}>
                {i18n`Confirm`}
              </button>
              &nbsp;
              <button
                class="pure-button pure-button-secondary btn-cancel"
                onClick={() =>
                  abortWithdrawalCall(
                    backendState,
                    pageState.withdrawalId,
                    pageStateSetter
                  )}>
                {i18n`Cancel`}
              </button>
            </p>
          </div>
        </form>
        <div class="hint">
          <p><Translate>
            A this point, a <b>real</b> bank would ask for an additional
            authentication proof (PIN/TAN, one time password, ..), instead
            of a simple calculation.
          </Translate></p>
        </div>
      </div>
    </article>
  </Fragment>);
}

function QrCodeSection({ talerWithdrawUri, abortButton }: { talerWithdrawUri: string, abortButton: h.JSX.Element }) {
  const i18n = useTranslator();
  useEffect(() => {
    //Taler Wallet WebExtension is listening to headers response and tab updates.
    //In the SPA there is no header response with the Taler URI so
    //this hack manually triggers the tab update after the QR is in the DOM.
    window.location.href = `${window.location.href.split('#')[0]}#`
  }, [])

  return <section id="main" class="content">
    <h1 class="nav">{i18n`Charge Taler Wallet`}</h1>
    <p>{i18n`You can use this QR code to withdraw to your mobile wallet:`}</p>
    {QR({ text: talerWithdrawUri })}
    <p>Click <a id="linkqr" href={talerWithdrawUri}>{i18n`this link`}</a> to open your Taler wallet!</p>
    <br />
    {abortButton}
  </section>
}

/**
 * Offer the QR code (and a clickable taler://-link) to
 * permit the passing of exchange and reserve details to
 * the bank.  Poll the backend until such operation is done.
 */
function TalerWithdrawalQRCode(Props: any): VNode {
  // turns true when the wallet POSTed the reserve details:
  const [pageState, pageStateSetter] = useContext(PageContext);
  const {
    withdrawalId,
    talerWithdrawUri,
    accountLabel,
    backendState } = Props;
  const i18n = useTranslator();
  const abortButton = <a class="pure-button" onClick={() => {
    pageStateSetter((prevState: PageStateType) => {
      const { withdrawalId, talerWithdrawUri, ...rest } = prevState;
      return { ...rest, withdrawalInProgress: false };
    })
  }}>{i18n`Abort`}</a>

  console.log(`Showing withdraw URI: ${talerWithdrawUri}`);
  // waiting for the wallet:

  const { data, error, mutate } = useSWR(`integration-api/withdrawal-operation/${withdrawalId}`);

  if (typeof error !== 'undefined') {
    console.log(`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, error);
    pageStateSetter((prevState: PageStateType) => ({
      ...prevState,
      hasError: true,
      error: i18n`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`
    }))
    return (<Fragment><br /><br />{abortButton}</Fragment>);
  }

  // data didn't arrive yet and wallet didn't communicate:
  if (typeof data === 'undefined')
    return <p>{i18n`Waiting the bank to create the operaion...`}</p>


  /**
   * Wallet didn't communicate withdrawal details yet:
   */
  console.log('withdrawal status', data);
  if (data.aborted)
    pageStateSetter((prevState: PageStateType) => {
      const {
        withdrawalId,
        talerWithdrawUri,
        ...rest } = prevState;
      return {
        ...rest,
        withdrawalInProgress: false,
        hasError: true,
        error: i18n`This withdrawal was aborted!`
      };
    })


  if (!data.selection_done) {
    setTimeout(() => mutate(), 1000); // check again after 1 second.
    return (<QrCodeSection talerWithdrawUri={talerWithdrawUri} abortButton={abortButton} />);
  }
  /**
   * Wallet POSTed the withdrawal details!  Ask the
   * user to authorize the operation (here CAPTCHA).
   */
  return (<TalerWithdrawalConfirmationQuestion backendState={backendState} />);
}



function WalletWithdraw(Props: any): VNode {
  const { backendState, pageStateSetter, focus } = Props;
  const currency = useContext(CurrencyContext);
  const i18n = useTranslator();
  let submitAmount = '5.00';
  const amountRegex = '^[0-9]+(\.[0-9]+)?$';

  const ref = useRef<HTMLInputElement>(null)
  useEffect(() => {
    if (focus) ref.current?.focus();
  }, [focus]);
  return (
    <div id="reserve-form"
      class="pure-form"
      name="tform">
      <p>
        <label for="withdraw-amount">{i18n`Amount to withdraw:`}</label>&nbsp;
        <input
          type="number"
          ref={ref}
          id="withdraw-amount"
          name="withdraw-amount"
          value={submitAmount}
          pattern={amountRegex}
          class="amount"
          onChange={(e): void => {
            // FIXME: validate using 'parseAmount()',
            // deactivate submit button as long as
            // amount is not valid
            submitAmount = e.currentTarget.value;
          }} />
        &nbsp;
        <input
          type="text"
          readonly
          class="currency-indicator"
          size={currency.length}
          maxLength={currency.length}
          tabIndex={-1} value={currency} />
      </p>
      <p>
        <div>
          <input
            id="select-exchange"
            class="pure-button pure-button-primary"
            type="submit"
            value={i18n`Withdraw`}
            onClick={() => {
              submitAmount = validateAmount(submitAmount);
              /**
               * By invalid amounts, the validator prints error messages
               * on the console, and the browser colourizes the amount input
               * box to indicate a error.
               */
              if (!submitAmount) return;
              createWithdrawalCall(
                `${currency}:${submitAmount}`,
                backendState,
                pageStateSetter
              )
            }} />
        </div>
      </p>
    </div>
  )
}


/**
 * Let the user choose a payment option,
 * then specify the details trigger the action.
 */
function PaymentOptions(Props: any): VNode {
  const { backendState, pageStateSetter, focus } = Props;
  const currency = useContext(CurrencyContext);
  const i18n = useTranslator();

  const [tab, setTab] = useState<'charge-wallet' | 'wire-transfer'>('charge-wallet')


  return (<article>
    <div class="payments">
      <div class="tab">
        <button class={tab === 'charge-wallet' ? 'tablinks active' : 'tablinks'}
          onClick={(): void => { setTab('charge-wallet') }}>
          {i18n`Charge Taler wallet`}
        </button>
        <button class={tab === 'wire-transfer' ? 'tablinks active' : 'tablinks'}
          onClick={(): void => { setTab('wire-transfer') }}>
          {i18n`Wire to bank account`}
        </button>
      </div>
      {tab === 'charge-wallet' &&
        <div id='charge-wallet' class='tabcontent active'>
          <h3>{i18n`Charge Taler wallet`}</h3>
          <WalletWithdraw
            backendState={backendState}
            focus
            pageStateSetter={pageStateSetter} />
        </div>
      }
      {tab === 'wire-transfer' &&
        <div id='wire-transfer' class='tabcontent active'>
          <h3>{i18n`Wire to bank account`}</h3>
          <PaytoWireTransfer
            backendState={backendState}
            focus
            pageStateSetter={pageStateSetter} />
        </div>
      }
    </div>
  </article>);
}

function RegistrationButton(Props: any): VNode {
  const { backendStateSetter, pageStateSetter } = Props;
  const i18n = useTranslator();
  if (UI_ALLOW_REGISTRATIONS) 
    return (<button
      class="pure-button pure-button-secondary btn-cancel"
      onClick={() => {
        pageStateSetter((prevState: PageStateType) => ({ ...prevState, tryRegister: true }))
      }}>
      {i18n`Register`}
    </button>);
  
  
  return (<span />);
  
}

/**
 * Collect and submit login data.
 */
function LoginForm(Props: any): VNode {
  const { backendStateSetter, pageStateSetter } = Props;
  const [submitData, submitDataSetter] = useCredentialsRequestType();
  const i18n = useTranslator();
  const ref = useRef<HTMLInputElement>(null)
  useEffect(() => {
    ref.current?.focus();
  }, []);
  return (<div class="login-div">
    <form action="javascript:void(0);" class="login-form">
      <div class="pure-form">
        <h2>{i18n`Please login!`}</h2>
        <p class="unameFieldLabel loginFieldLabel formFieldLabel"><label for="username">{i18n`Username:`}</label></p>
        <input
          ref={ref}
          autoFocus
          type="text"
          name="username"
          id="username"
          value={submitData && submitData.username}
          placeholder="Username"
          required
          onInput={(e): void => {
            submitDataSetter((submitData: any) => ({
              ...submitData,
              username: e.currentTarget.value,
            }))
          }}
        />
        <p class="passFieldLabel loginFieldLabel formFieldLabel"><label for="password">{i18n`Password:`}</label></p>
        <input
          type="password"
          name="password"
          id="password"
          value={submitData && submitData.password}
          placeholder="Password"
          required
          onInput={(e): void => {
            submitDataSetter((submitData: any) => ({
              ...submitData,
              password: e.currentTarget.value,
            }))
          }} />
        <br />
        <button
          type="submit"
          class="pure-button pure-button-primary"
          onClick={() => {
            if (typeof submitData === 'undefined') {
              console.log('login data is undefined', submitData);
              return;
            }
            if (submitData.password.length == 0 || submitData.username.length == 0) {
              console.log('username or password is the empty string', submitData);
              return;
            }
            loginCall(
              // Deep copy, to avoid the cleanup
              // below make data disappear.
              { ...submitData },
              backendStateSetter,
              pageStateSetter
            );
            submitDataSetter(undefined);
          }}>{i18n`Login`}
        </button>
        {RegistrationButton(Props)}
      </div>
    </form>
  </div>);
}

/**
 * Collect and submit registration data.
 */
function RegistrationForm(Props: any): VNode {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [pageState, pageStateSetter] = useContext(PageContext);
  const [submitData, submitDataSetter] = useCredentialsRequestType();
  const i18n = useTranslator();
  // https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs
  return (
    <Fragment>
      <h1 class="nav">
        {
          i18n`Welcome to ${UI_BANK_NAME}!`
        }
      </h1>
      <article>
        <div class="register-div">
          <form action="javascript:void(0);" class="register-form">
            <div class="pure-form">
              <h2>{i18n`Please register!`}</h2>
              <p class="unameFieldLabel registerFieldLabel formFieldLabel"><label for="register-un">{i18n`Username:`}</label></p>
              <input
                id="register-un"
                name="register-un"
                type="text"
                placeholder="Username"
                value={submitData && submitData.username}
                required
                onInput={(e): void => {
                  submitDataSetter((submitData: any) => ({
                    ...submitData,
                    username: e.currentTarget.value,
                  }))
                }} />
              <br />
              <p class="unameFieldLabel registerFieldLabel formFieldLabel"><label for="register-pw">{i18n`Password:`}</label></p>
              <input
                type="password"
                name="register-pw"
                id="register-pw"
                placeholder="Password"
                value={submitData && submitData.password}
                required
                onInput={(e): void => {
                  submitDataSetter((submitData: any) => ({
                    ...submitData,
                    password: e.currentTarget.value,
                  }))
                }} />
              <br />
              {/*
              <label for="phone">{i18n`Phone number:`}</label>
              // FIXME: add input validation (must start with +, otherwise only numbers)
              <input
                name="phone"
                id="phone"
                type="phone"
                placeholder="+CC-123456789"
                value={submitData && submitData.phone}
                required
                onInput={(e): void => {
		  submitDataSetter((submitData: any) => ({
                    ...submitData,
                    phone: e.currentTarget.value,
                  }))}} />
              <br />
              */}
              <button
                class="pure-button pure-button-primary btn-register"
                onClick={() => {
                  console.log('maybe submitting the registration..');
                  console.log(submitData);
                  if (typeof submitData === 'undefined') {
                    console.log(`submit data ${submitData} is undefined`);
                    return;
                  }
                  if ((typeof submitData.password === 'undefined') ||
                    (typeof submitData.username === 'undefined')) {
                    console.log('username or password is undefined');
                    return;
                  }
                  if (submitData.password.length === 0 ||
                    submitData.username.length === 0) {
                    console.log('username or password are the empty string');
                    return;
                  }
                  console.log('submitting the registration..');
                  registrationCall(
                    { ...submitData },
                    Props.backendStateSetter, // will store BE URL, if OK.
                    pageStateSetter
                  );
                  console.log('Clearing the input data');
                  /**
                     * FIXME: clearing the data should be done by setting
                     * it to undefined, instead of the empty strings, just
                     * like done in the login function.  Now set to the empty
                     * strings due to a non lively update of the <input> fields
                     * after setting to undefined.
                     */
                  submitDataSetter({ username: '', password: '' })
                }}>
                {i18n`Register`}
              </button>
              {/* FIXME: should use a different color */}
              <button
                class="pure-button pure-button-secondary btn-cancel"
                onClick={() => {
                  pageStateSetter((prevState: PageStateType) => ({ ...prevState, tryRegister: false }))
                }}>
                {i18n`Cancel`}
              </button>
            </div>
          </form>
        </div>
      </article>
    </Fragment>
  )
}

/**
 * Show one page of transactions.
 */
function Transactions(Props: any): VNode {
  const { pageNumber, accountLabel } = Props;
  const i18n = useTranslator();
  const { data, error } = useSWR(
    `access-api/accounts/${accountLabel}/transactions?page=${pageNumber}`
  );
  if (typeof error !== 'undefined') {
    console.log('transactions not found error', error);
    switch (error.status) {
    case 404: {
      return <p>Transactions page {pageNumber} was not found.</p>
    }
    case 401: {
      return <p>Wrong credentials given.</p>
    }
    default: {
      return <p>Transaction page {pageNumber} could not be retrieved.</p>
    }
    }
  }
  if (!data) {
    console.log(`History data of ${accountLabel} not arrived`);
    return <p>"Transactions page loading..."</p>;
  }
  console.log(`History data of ${accountLabel}`, data);
  return (<div class="results">
    <table class="pure-table pure-table-striped">
      <thead>
        <tr>
          <th>{i18n`Date`}</th>
          <th>{i18n`Amount`}</th>
          <th>{i18n`Counterpart`}</th>
          <th>{i18n`Subject`}</th>
        </tr>
      </thead>
      <tbody>
        {data.transactions.map((item: any, idx: number) => {
          const sign = item.direction == 'DBIT' ? '-' : '';
          const counterpart = item.direction == 'DBIT' ? item.creditorIban : item.debtorIban;
          // Pattern:
          //
          // DD/MM YYYY subject -5 EUR
          // DD/MM YYYY subject 5 EUR
          const dateRegex = /^([0-9]{4})-([0-9]{2})-([0-9]{1,2})/
          const dateParse = dateRegex.exec(item.date)
          const date = dateParse !== null ? `${dateParse[3]}/${dateParse[2]} ${dateParse[1]}` : 'date not found'
          return (<tr key={idx}>
            <td>{date}</td>
            <td>{sign}{item.amount} {item.currency}</td>
            <td>{counterpart}</td>
            <td>{item.subject}</td>
          </tr>);
        })}
      </tbody>
    </table>
  </div>);
}

/**
 * Show only the account's balance.  NOTE: the backend state
 * is mostly needed to provide the user's credentials to POST
 * to the bank.
 */
function Account(Props: any): VNode {
  const { cache } = useSWRConfig();
  const { accountLabel, backendState } = Props;
  // Getting the bank account balance:
  const endpoint = `access-api/accounts/${accountLabel}`;
  const { data, error } = useSWR(endpoint);
  const [pageState, pageStateSetter] = useContext(PageContext);
  const {
    withdrawalInProgress,
    withdrawalId,
    isLoggedIn,
    talerWithdrawUri } = pageState;
  const i18n = useTranslator();
  /**
   * This part shows a list of transactions: with 5 elements by
   * default and offers a "load more" button.
   */
  const [txPageNumber, setTxPageNumber] = useTransactionPageNumber()
  const txsPages = []
  for (let i = 0; i <= txPageNumber; i++)
    txsPages.push(<Transactions accountLabel={accountLabel} pageNumber={i} />)

  if (typeof error !== 'undefined') {
    console.log('account error', error);
    /**
     * FIXME: to minimize the code, try only one invocation
     * of pageStateSetter, after having decided the error
     * message in the case-branch.
     */
    switch (error.status) {
    case 404: {
      pageStateSetter((prevState: PageStateType) => ({
        ...prevState,
        hasError: true,
        isLoggedIn: false,
        error: i18n`Username or account label '${accountLabel}' not found.  Won't login.`
      }));

      /**
         * 404 should never stick to the cache, because they
         * taint successful future registrations.  How?  After
         * registering, the user gets navigated to this page,
         * therefore a previous 404 on this SWR key (the requested
         * resource) would still appear as valid and cause this
         * page not to be shown! A typical case is an attempted
         * login of a unregistered user X, and then a registration
         * attempt of the same user X: in this case, the failed
         * login would cache a 404 error to X's profile, resulting
         * in the legitimate request after the registration to still
         * be flagged as 404.  Clearing the cache should prevent
         * this.  */
      (cache as any).clear();
      return <p>Profile not found...</p>;
    }
    case 401: {
      pageStateSetter((prevState: PageStateType) => ({
        ...prevState,
        hasError: true,
        isLoggedIn: false,
        error: i18n`Wrong credentials given.`
      }));
      return <p>Wrong credentials...</p>;
    }
    default: {
      pageStateSetter((prevState: PageStateType) => ({
        ...prevState,
        hasError: true,
        isLoggedIn: false,
        error: i18n`Account information could not be retrieved.`
      }));
      return <p>Unknown problem...</p>;
    }
    }
  }
  if (!data) return <p>Retrieving the profile page...</p>;

  /**
   * This block shows the withdrawal QR code.
   *
   * A withdrawal operation replaces everything in the page and
   * (ToDo:) starts polling the backend until either the wallet
   * selected a exchange and reserve public key, or a error / abort
   * happened.
   *
   * After reaching one of the above states, the user should be
   * brought to this ("Account") page where they get informed about
   * the outcome.
   */
  console.log(`maybe new withdrawal ${talerWithdrawUri}`);
  if (talerWithdrawUri) {
    console.log('Bank created a new Taler withdrawal');
    return (
      <BankFrame>
        <TalerWithdrawalQRCode
          accountLabel={accountLabel}
          backendState={backendState}
          withdrawalId={withdrawalId}
          talerWithdrawUri={talerWithdrawUri} />
      </BankFrame>
    );
  }
  const balance = parseAmount(data.balance.amount)

  return (<BankFrame>
    <div>
      <h1 class="nav welcome-text">
        <Translate>Welcome, {accountLabel} ({getIbanFromPayto(data.paytoUri)})!</Translate>
      </h1>
    </div>
    <section id="assets">
      <div class="asset-summary">
        <h2>{i18n`Bank account balance`}</h2>
        {data.balance.credit_debit_indicator == 'debit' ? (<b>-</b>) : null}
        <div class="large-amount amount"><span class="value">{`${balance.value}`}</span>&nbsp;<span class="currency">{`${balance.currency}`}</span></div>
      </div>
    </section>
    <section id="payments">
      <div class="payments">
        <h2>{i18n`Payments`}</h2>
        {/* FIXME: turn into button! */}
        <CurrencyContext.Provider value={balance.currency}>
          {Props.children}
          <PaymentOptions
            backendState={backendState}
            pageStateSetter={pageStateSetter} />
        </CurrencyContext.Provider>
      </div>
    </section>
    <section id="main">
      <article>
        <h2>{i18n`Latest transactions:`}</h2>
        <Transactions pageNumber="0" accountLabel={accountLabel} />
      </article>
    </section>
  </BankFrame>);
}

/**
 * Factor out login credentials.
 */
function SWRWithCredentials(props: any): VNode {
  const { username, password, backendUrl } = props;
  const headers = new Headers();
  headers.append(
    'Authorization',
    `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`
  );
  console.log('Likely backend base URL', backendUrl);
  return (
    <SWRConfig
      value={{
        fetcher: (url: string) =>
          fetch(backendUrl + url || '', { headers }).then(
            (r) => {
              if (!r.ok)
                throw { status: r.status, json: r.json() };

              return r.json()
            }
          ),
      }}>{props.children}</SWRConfig>
  );
}

function SWRWithoutCredentials(Props: any): VNode {
  const { baseUrl } = Props;
  console.log('Base URL', baseUrl);
  return (
    <SWRConfig
      value={{
        fetcher: (url: string) =>
          fetch(baseUrl + url || '').then(
            (r) => {
              if (!r.ok)
                throw { status: r.status, json: r.json() };

              return r.json()
            }
          ),
      }}>{Props.children}</SWRConfig>
  );
}

/**
 * Show histories of public accounts.
 */
function PublicHistories(Props: any): VNode {
  const [showAccount, setShowAccount] = useShowPublicAccount();
  const { data, error } = useSWR('access-api/public-accounts');
  const i18n = useTranslator();

  if (typeof error !== 'undefined') {
    console.log('account error', error);
    switch (error.status) {
    case 404:
      console.log('public accounts: 404', error);
      Props.pageStateSetter((prevState: PageStateType) => ({
        ...prevState,
        hasError: true,
        showPublicHistories: false,
        error: i18n`List of public accounts was not found.`
      }));
      break;
    default:
      console.log('public accounts: non-404 error', error);
      Props.pageStateSetter((prevState: PageStateType) => ({
        ...prevState,
        hasError: true,
        showPublicHistories: false,
        error: i18n`List of public accounts could not be retrieved.`
      }));
      break;
    }
  }
  if (!data)
    return (<p>Waiting public accounts list...</p>)
  const txs: any = {};
  const accountsBar = [];

  /**
   * Show the account specified in the props, or just one
   * from the list if that's not given.
   */
  if (typeof showAccount === 'undefined' && data.publicAccounts.length > 0)
    setShowAccount(data.publicAccounts[1].accountLabel);
  console.log(`Public history tab: ${showAccount}`);

  // Ask story of all the public accounts.
  for (const account of data.publicAccounts) {
    console.log('Asking transactions for', account.accountLabel)
    const isSelected = account.accountLabel == showAccount;
    accountsBar.push(
      <li class={isSelected ? 'pure-menu-selected pure-menu-item' : 'pure-menu-item pure-menu'}>
        <a href="#"
          class="pure-menu-link"
          onClick={() => setShowAccount(account.accountLabel)}>{account.accountLabel}</a>
      </li>
    );
    txs[account.accountLabel] = <Transactions accountLabel={account.accountLabel} pageNumber={0} />
  }

  return (<Fragment>
    <h1 class="nav">{i18n`History of public accounts`}</h1>
    <section id="main">
      <article>
        <div class="pure-menu pure-menu-horizontal" name="accountMenu">
          <ul class="pure-menu-list">{accountsBar}</ul>
          {typeof showAccount !== 'undefined' ? txs[showAccount] : <p>No public transactions found.</p>}
          {Props.children}
        </div>
      </article>
    </section>
  </Fragment>);
}

/**
 * If the user is logged in, it displays
 * the balance, otherwise it offers to login.
 */
export function BankHome(): VNode {
  const [backendState, backendStateSetter] = useBackendState();
  const [pageState, pageStateSetter] = usePageState();
  const [accountState, accountStateSetter] = useAccountState();
  const setTxPageNumber = useTransactionPageNumber()[1];
  const i18n = useTranslator();

  if (pageState.showPublicHistories)
    return (<SWRWithoutCredentials baseUrl={getRootPath()}>
      <PageContext.Provider value={[pageState, pageStateSetter]}>
        <BankFrame>
          <PublicHistories pageStateSetter={pageStateSetter}>
            <br />
            <a class="pure-button" onClick={() => {
              pageStateSetter((prevState: PageStateType) =>
                ({ ...prevState, showPublicHistories: false }))
            }}>Go back</a>
          </PublicHistories>
        </BankFrame>
      </PageContext.Provider>
    </SWRWithoutCredentials>);

  if (pageState.tryRegister) {
    console.log('allow registrations?', UI_ALLOW_REGISTRATIONS);
    if (UI_ALLOW_REGISTRATIONS)
      return (
        <PageContext.Provider value={[pageState, pageStateSetter]}>
          <BankFrame>
            <RegistrationForm backendStateSetter={backendStateSetter} />
          </BankFrame>
        </PageContext.Provider>
      );

    return (
      <PageContext.Provider value={[pageState, pageStateSetter]}>
        <BankFrame>
          <p>{i18n`Currently, the bank is not accepting new registrations!`}</p>
        </BankFrame>
      </PageContext.Provider>
    );
  }
  if (pageState.isLoggedIn) {
    if (typeof backendState === 'undefined') {
      pageStateSetter((prevState) => ({
        ...prevState,
        hasError: true,
        isLoggedIn: false,
        error: i18n`Page has a problem: logged in but backend state is lost.`
      }));
      return (<p>Error: waiting for details...</p>);
    }
    console.log('Showing the profile page..');
    return (
      <SWRWithCredentials
        username={backendState.username}
        password={backendState.password}
        backendUrl={backendState.url}>
        <PageContext.Provider value={[pageState, pageStateSetter]}>
          <Account accountLabel={backendState.username} backendState={backendState} />
        </PageContext.Provider>
      </SWRWithCredentials>
    );
  } // end of logged-in state.

  return (
    <PageContext.Provider value={[pageState, pageStateSetter]}>
      <BankFrame>
        <h1 class="nav">
          {
            i18n`Welcome to ${UI_BANK_NAME}!`
          }
        </h1>
        <LoginForm
          pageStateSetter={pageStateSetter}
          backendStateSetter={backendStateSetter} />
      </BankFrame>
    </PageContext.Provider>
  );
}