/*
 This file is part of GNU Taler
 (C) 2022 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

import {
  Amounts,
  HttpStatusCode,
  Logger,
  WithdrawUriResult,
  parsePaytoUri,
} from "@gnu-taler/taler-util";
import { ErrorType, notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser";
import { Fragment, VNode, h } from "preact";
import { Loading } from "../components/Loading.js";
import { useWithdrawalDetails } from "../hooks/access.js";
import { useSettings } from "../hooks/settings.js";
import { handleNotOkResult } from "./HomePage.js";
import { QrCodeSection } from "./QrCodeSection.js";
import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";

const logger = new Logger("WithdrawalQRCode");

interface Props {
  withdrawUri: WithdrawUriResult;
  onContinue: () => void;
  onLoadNotOk: () => void;
}
/**
 * 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.
 */
export function WithdrawalQRCode({
  withdrawUri,
  onContinue,
  onLoadNotOk,
}: Props): VNode {
  const [settings, updateSettings] = useSettings();
  function clearCurrentWithdrawal(): void {
    updateSettings("currentWithdrawalOperationId", undefined);
    onContinue();
  }
  const { i18n } = useTranslationContext();
  const result = useWithdrawalDetails(withdrawUri.withdrawalOperationId);
  if (!result.ok) {
    if (result.loading) {
      return <Loading />;
    }
    if (
      result.type === ErrorType.CLIENT &&
      result.status === HttpStatusCode.NotFound
    ) {
      return <div>operation not found</div>;
    }
    onLoadNotOk();
    return handleNotOkResult(i18n)(result);
  }
  const { data } = result;

  if (data.aborted) {
    return <section id="main" class="content">
      <h1 class="nav">{i18n.str`Operation aborted`}</h1>
      <section>
        <p>
          <i18n.Translate>
            The wire transfer to the GNU Taler Exchange bank's account was aborted, your balance
            was not affected.
          </i18n.Translate>
        </p>
        <p>
          <i18n.Translate>
            You can close this page now or continue to the account page.
          </i18n.Translate>
        </p>
        <a class="pure-button pure-button-primary"
          style={{float:"right"}}
          onClick={async (e) => {
            e.preventDefault();
            clearCurrentWithdrawal()
            onContinue()
        }}>
          {i18n.str`Continue`}
        </a>

      </section>
    </section>
  }

  if (data.confirmation_done) {
    return <section id="main" class="content">
      <h1 class="nav">{i18n.str`Operation completed`}</h1>

      <section id="assets" style={{maxWidth: 400, marginLeft: "auto", marginRight:"auto"}}>
        <p>
          <i18n.Translate>
            The wire transfer to the GNU Taler Exchange bank's account is completed, now the 
            exchange will send the requested amount into your GNU Taler wallet.
          </i18n.Translate>
        </p>
        <p>
          <i18n.Translate>
            You can close this page now or continue to the account page.
          </i18n.Translate>
        </p>
        <div style={{textAlign:"center"}}>

          <a class="pure-button pure-button-primary"
            onClick={async (e) => {
              e.preventDefault();
              clearCurrentWithdrawal()
              onContinue()
            }}>
            {i18n.str`Continue`}
          </a>
        </div>
      </section>
    </section>
  }
  if (!data.selected_reserve_pub) {
    return <div>
      the exchange is selcted but no reserve pub
    </div>
  }

  const account = !data.selected_exchange_account ? undefined : parsePaytoUri(data.selected_exchange_account)

  if (!account) {
    return <div>
      the exchange is selcted but no account 
    </div>
  }

  if (!data.selection_done) {
    return (
      <QrCodeSection
        withdrawUri={withdrawUri}
        onAborted={() => {
          notifyInfo(i18n.str`Operation canceled`);
          clearCurrentWithdrawal()
          onContinue()
      }}
      />
    );
  }

  return (
    <WithdrawalConfirmationQuestion
      withdrawUri={withdrawUri}
      details={{
        account,
        reserve: data.selected_reserve_pub,
        amount: Amounts.parseOrThrow("usd:10.00")
      }}
      onAborted={() => {
        notifyInfo(i18n.str`Operation canceled`);
        clearCurrentWithdrawal()
        onContinue()
  }}
    />
  );
}