import { ErrorType, HttpResponsePaginated, RequestError, notify, notifyError, useTranslationContext } from "@gnu-taler/web-util/browser";
import { VNode,h,Fragment } from "preact";
import { useAccountDetails } from "../../hooks/access.js";
import { useAdminAccountAPI } from "../../hooks/circuit.js";
import { Amounts, HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util";
import { buildRequestErrorMessage } from "../../utils.js";

export function RemoveAccount({
    account,
    onClear,
    onUpdateSuccess,
    onLoadNotOk,
  }: {
    onLoadNotOk: <T>(
      error: HttpResponsePaginated<T, SandboxBackend.SandboxError>,
    ) => VNode;
    onClear: () => void;
    onUpdateSuccess: () => void;
    account: string;
  }): VNode {
    const { i18n } = useTranslationContext();
    const result = useAccountDetails(account);
    const { deleteAccount } = useAdminAccountAPI();
  
    if (!result.ok) {
      if (result.loading || result.type === ErrorType.TIMEOUT) {
        return onLoadNotOk(result);
      }
      if (result.status === HttpStatusCode.NotFound) {
        return <div>account not found</div>;
      }
      return onLoadNotOk(result);
    }
  
    const balance = Amounts.parse(result.data.balance.amount);
    if (!balance) {
      return <div>there was an error reading the balance</div>;
    }
    const isBalanceEmpty = Amounts.isZero(balance);
    return (
      <div>
        <div>
          <h1 class="nav welcome-text">
            <i18n.Translate>Remove account: {account}</i18n.Translate>
          </h1>
        </div>
        {/* {FXME: SHOW WARNING} */}
        {/* {!isBalanceEmpty && (
          <ErrorBannerFloat
            error={{
              title: i18n.str`Can't delete the account`,
              description: i18n.str`Balance is not empty`,
            }}
            onClear={() => saveError(undefined)}
          />
        )} */}
  
        <p>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <div>
              <input
                class="pure-button"
                type="submit"
                value={i18n.str`Cancel`}
                onClick={async (e) => {
                  e.preventDefault();
                  onClear();
                }}
              />
            </div>
            <div>
              <input
                id="select-exchange"
                class="pure-button pure-button-primary content"
                disabled={!isBalanceEmpty}
                type="submit"
                value={i18n.str`Confirm`}
                onClick={async (e) => {
                  e.preventDefault();
                  try {
                    const r = await deleteAccount(account);
                    onUpdateSuccess();
                  } catch (error) {
                    if (error instanceof RequestError) {
                      notify(
                        buildRequestErrorMessage(i18n, error.cause, {
                          onClientError: (status) =>
                            status === HttpStatusCode.Forbidden
                              ? i18n.str`The administrator specified a institutional username`
                              : status === HttpStatusCode.NotFound
                                ? i18n.str`The username was not found`
                                : status === HttpStatusCode.PreconditionFailed
                                  ? i18n.str`Balance was not zero`
                                  : undefined,
                        }),
                      );
                    } else {
                      notifyError(i18n.str`Operation failed, please report`,
                        (error instanceof Error
                            ? error.message
                            : JSON.stringify(error)) as TranslatedString);
                    }
                  }
                }}
              />
            </div>
          </div>
        </p>
      </div>
    );
  }