import { createBadge } from "@ui/ui_template_badge";
import { createButton, createCard } from "@ui/ui_template_elements";
import { section } from "@ui/ui_template_general_blocks";
import { createGeneralLayout } from "@ui/ui_template_general_layout";
import { currentLanguageIndex, ui_locales } from "@ui/ui_template_locale";
import "./B11_Status_UI_Style.css";

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

function buildStatusFlow(): HTMLElement {
  const flow = document.createElement("div");
  flow.className = "b11-status__flow";
  flow.setAttribute("role", "list");
  const steps = [
    L("B11_Status_Step_Request"),
    L("B11_Status_Step_Issue"),
    L("B11_Status_Step_Deposit"),
    L("B11_Status_Step_Complete"),
  ];
  for (const label of steps) {
    const title = document.createElement("strong");
    title.textContent = label;
    const item = createCard({
      body: [title, createBadge(L("B11_Status_NotStarted"), "neutral")],
      pad: 16,
    });
    item.classList.add("b11-status__step");
    item.setAttribute("role", "listitem");
    flow.append(item);
  }
  return flow;
}

export function renderB11Status(root: HTMLElement): void {
  const downloadBody = document.createElement("div");
  downloadBody.className = "b11-status__download";
  const description = document.createElement("p");
  description.textContent = L("B11_Status_Download_Description");
  downloadBody.append(
    description,
    createButton({ label: L("Common_Btn_Download"), variant: "ghost", disabled: true }),
  );

  const layout = createGeneralLayout({
    pageClass: "b11-status",
    title: L("B11_Status_Title"),
    subtitle: L("B11_Status_Subtitle"),
    content: [
      section(L("B11_Status_Flow_Title"), buildStatusFlow(), true),
      section(L("B11_Status_Download_Title"), downloadBody, true),
    ],
  });
  root.replaceChildren(layout.root);
}