import "./ui_template_general_layout.css";
import { createButton, createCard } from "./ui_template_elements";
import { currentLanguageIndex, ui_locales } from "./ui_template_locale";

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

export function buildSectionHeader(
  titleText: string,
  actionButtons: HTMLElement[] = [],
): HTMLElement {
  const header = document.createElement("div");
  header.className = "ui-general-block__section-header b01-dashboard__section-header";

  const title = document.createElement("h3");
  title.className = "ui-card__title";
  title.style.margin = "0";
  title.textContent = titleText;

  const actions = document.createElement("div");
  actions.className = "ui-general-block__actions b01-dashboard__actions";
  actions.append(...actionButtons);

  header.append(title, actions);
  return header;
}

export function section(
  title: string,
  body: HTMLElement,
  wide = false,
  actions: HTMLElement[] = [],
): HTMLElement {
  const header = buildSectionHeader(title, actions);
  const card = createCard({ body: [header, body], raised: true });
  card.classList.add("ui-general-block__section", "b01-dashboard__section");
  if (wide) card.classList.add("ui-general-block__section--wide", "b01-dashboard__section--wide");
  return card;
}

export function table(headers: string[], rows: HTMLElement[][]): HTMLElement {
  if (!rows.length) {
    const empty = document.createElement("p");
    empty.className = "ui-general-block__empty b01-dashboard__empty";
    empty.textContent = L("Common_Status_Empty");
    return empty;
  }
  const wrap = document.createElement("div");
  wrap.className = "ui-general-block__table-wrap b01-dashboard__table-wrap";
  const tableEl = document.createElement("table");
  tableEl.className = "ui-general-block__table b01-dashboard__table";
  const thead = document.createElement("thead");
  const headRow = document.createElement("tr");
  for (const header of headers) {
    const th = document.createElement("th");
    th.textContent = header;
    headRow.append(th);
  }
  thead.append(headRow);
  const tbody = document.createElement("tbody");
  for (const row of rows) {
    const tr = document.createElement("tr");
    for (const cell of row) {
      const td = document.createElement("td");
      td.append(cell);
      tr.append(td);
    }
    tbody.append(tr);
  }
  tableEl.append(thead, tbody);
  wrap.append(tableEl);
  return wrap;
}

export function text(value: unknown): HTMLElement {
  const span = document.createElement("span");
  span.textContent = value == null || value === "" ? "-" : String(value);
  return span;
}

export function actionPair(approve: () => void, reject: () => void): HTMLElement {
  const row = document.createElement("div");
  row.className = "ui-general-block__actions b01-dashboard__actions";
  row.append(
    createButton({ label: L("B01_Dashboard_Approve"), variant: "ghost", onClick: approve }),
    createButton({ label: L("B01_Dashboard_Reject"), variant: "danger", onClick: reject }),
  );
  return row;
}