import { RequestError, notify, notifyError, useTranslationContext } from "@gnu-taler/web-util/browser";
import { VNode, h, Fragment } from "preact";
import { useAdminAccountAPI } from "../../hooks/circuit.js";
import { useState } from "preact/hooks";
import { buildRequestErrorMessage } from "../../utils.js";
import { HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util";
import { getRandomPassword } from "../rnd.js";
import { AccountForm } from "./AccountForm.js";

export function CreateNewAccount({
    onClose,
    onCreateSuccess,
}: {
    onClose: () => void;
    onCreateSuccess: (password: string) => void;
}): VNode {
    const { i18n } = useTranslationContext();
    const { createAccount } = useAdminAccountAPI();
    const [submitAccount, setSubmitAccount] = useState<
        SandboxBackend.Circuit.CircuitAccountData | undefined
    >();
    return (
        <div>
            <div>
                <h1 class="nav welcome-text">
                    <i18n.Translate>New account</i18n.Translate>
                </h1>
            </div>

            <div style={{ maxWidth: 600, overflowX: "hidden", margin: "auto" }}>
                <AccountForm
                    template={undefined}
                    purpose="create"
                    onChange={(a) => {
                        setSubmitAccount(a);
                    }}
                />

                <p>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                        <div>
                            <input
                                class="pure-button"
                                type="submit"
                                value={i18n.str`Close`}
                                onClick={async (e) => {
                                    e.preventDefault();
                                    onClose();
                                }}
                            />
                        </div>
                        <div>
                            <input
                                id="select-exchange"
                                class="pure-button pure-button-primary content"
                                disabled={!submitAccount}
                                type="submit"
                                value={i18n.str`Confirm`}
                                onClick={async (e) => {
                                    e.preventDefault();

                                    if (!submitAccount) return;
                                    try {
                                        const account: SandboxBackend.Circuit.CircuitAccountRequest =
                                        {
                                            cashout_address: submitAccount.cashout_address,
                                            contact_data: submitAccount.contact_data,
                                            internal_iban: submitAccount.iban,
                                            name: submitAccount.name,
                                            username: submitAccount.username,
                                            password: getRandomPassword(),
                                        };

                                        await createAccount(account);
                                        onCreateSuccess(account.password);
                                    } catch (error) {
                                        if (error instanceof RequestError) {
                                            notify(
                                                buildRequestErrorMessage(i18n, error.cause, {
                                                    onClientError: (status) =>
                                                        status === HttpStatusCode.Forbidden
                                                            ? i18n.str`The rights to perform the operation are not sufficient`
                                                            : status === HttpStatusCode.BadRequest
                                                                ? i18n.str`Input data was invalid`
                                                                : status === HttpStatusCode.Conflict
                                                                    ? i18n.str`At least one registration detail was not available`
                                                                    : undefined,
                                                }),
                                            );
                                        } else {
                                            notifyError(
                                                i18n.str`Operation failed, please report`,
                                                (error instanceof Error
                                                    ? error.message
                                                    : JSON.stringify(error)) as TranslatedString
                                            )
                                        }
                                    }
                                }}
                            />
                        </div>
                    </div>
                </p>
            </div>
        </div>
    );
}