import { createButton, createTag } from "@ui/ui_template_elements";
import { section, table, text } from "@ui/ui_template_general_blocks";
import { createGeneralLayout } from "@ui/ui_template_general_layout";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
import "./B10_Payment_UI_Style.css";

function L(key: keyof typeof ui_locales): string {
  return ui_locales[key][currentLanguageIndex];
}

export function renderB10Payment(root: HTMLElement): void {
  const invoiceBody = document.createElement("div");
  invoiceBody.className = "b10-payment__summary";
  const invoiceDescription = document.createElement("p");
  invoiceDescription.textContent = L("B10_Payment_Invoice_Description");
  invoiceBody.append(invoiceDescription, createTag(L("B10_Payment_Invoice_Status"), "neutral"));

  const invoiceSection = section(L("B10_Payment_Invoice_Title"), invoiceBody, true, [
    createButton({ label: L("B10_Payment_Invoice_Request"), disabled: true }),
  ]);

  const depositNote = document.createElement("p");
  depositNote.className = "b10-payment__note";
  depositNote.textContent = L("B10_Payment_Deposit_Note");
  const depositBody = document.createElement("div");
  depositBody.className = "b10-payment__summary";
  depositBody.append(
    table(
      [],
      [
        [text(L("B10_Payment_Deposit_Account")), text(L("B10_Payment_Deposit_Pending"))],
        [text(L("B10_Payment_Deposit_Amount")), text(L("B10_Payment_Deposit_Pending"))],
      ],
    ),
    depositNote,
  );

  const layout = createGeneralLayout({
    pageClass: "b10-payment",
    title: L("B10_Payment_Title"),
    subtitle: L("B10_Payment_Subtitle"),
    content: [invoiceSection, section(L("B10_Payment_Deposit_Title"), depositBody, true)],
  });
  root.replaceChildren(layout.root);
}