/components/table/table

import { button, buttons } from "@hedia/hexui/components/button";
import { div, strong, table, tbody, td, th, thead, tr } from "@hedia/html/elements";
import { checkmarkOutlineIcon, deleteOutlineIcon } from "@hedia/iconly/outline";

const connectedDevices = [
  { id: "D12584", clinic: "Nordic Diabetes Center", connectedOn: "04 Jan 2024" },
  { id: "D48291", clinic: "Hedia Labs", connectedOn: "12 Jan 2024" },
  { id: "D23765", clinic: "Copenhagen Care", connectedOn: "02 Feb 2024" },
];

const pendingDeviceRequests = [
  { id: "D90871", clinic: "Hedia Clinics", requestedOn: "11 Mar 2024" },
  { id: "D56432", clinic: "Delta Health", requestedOn: "15 Mar 2024" },
  { id: "D77654", clinic: "Carewell", requestedOn: "19 Mar 2024" },
];

const billingRows = [
  { month: "January 2024", entries: 38, amount: 1280 },
  { month: "February 2024", entries: 35, amount: 1160 },
  { month: "March 2024", entries: 42, amount: 1390 },
];

const currencyFormatter = new Intl.NumberFormat("da-DK", {
  style: "currency",
  currency: "DKK",
  maximumFractionDigits: 0,
});

const formatCurrency = (value: number) => currencyFormatter.format(value);

export default {
  basicTable,
  emptyTable,
  tableWithActions,
  tableWithNumericCells,
  tableWithCustomStyles,
};

export function basicTable() {
  return table(
    thead(tr(th("Device ID"), th("Clinic"), th("Connected"))),
    tbody(...connectedDevices.map((device) => tr(td(device.id), td(device.clinic), td(device.connectedOn)))),
  );
}

export function tableWithActions() {
  return table(
    thead(tr(th("Device ID"), th("Clinic"), th({ class: "table-cell-actions" }, "Actions"))),
    tbody(
      ...pendingDeviceRequests.map((request) =>
        tr(
          td(request.id),
          td(request.clinic),
          td(
            { class: "table-cell-actions" },
            buttons(
              { arrangement: "horizontal" },
              button({ kind: "primary", shape: "round" }, checkmarkOutlineIcon()),
              button({ kind: "danger", shape: "round" }, deleteOutlineIcon()),
            ),
          ),
        ),
      ),
    ),
  );
}

export function tableWithNumericCells() {
  const totalEntries = billingRows.reduce((sum, row) => sum + row.entries, 0);
  const totalAmount = billingRows.reduce((sum, row) => sum + row.amount, 0);

  return table(
    thead(
      tr(
        th("Month"),
        th({ class: "table-cell-numeric" }, "Entries"),
        th({ class: "table-cell-numeric" }, "Amount"),
      ),
    ),
    tbody(
      ...billingRows.map((row) =>
        tr(
          td(row.month),
          td({ class: "table-cell-numeric" }, row.entries.toString()),
          td({ class: "table-cell-numeric" }, formatCurrency(row.amount)),
        ),
      ),
      tr(
        td(strong("Total")),
        td({ class: "table-cell-numeric" }, strong(totalEntries.toString())),
        td({ class: "table-cell-numeric" }, strong(formatCurrency(totalAmount))),
      ),
    ),
  );
}

export function emptyTable() {
  return table(
    thead(tr(th("Device ID"), th("Clinic"), th("Connected"))),
    tbody(tr(td({ colspan: 3, style: "text-align: center; padding: 1rem;" }, "No connected devices found."))),
  );
}

export function tableWithCustomStyles() {
  return div(
    { class: "align-items-center" },
    table(
      tr(
        { style: "background-color: #FF5A01; color: #FFFFFF;" },
        td({ style: "text-align: right; padding: 0.25rem;" }, "Very high:"),
        td({ style: "text-align: center; padding: 0.25rem;" }, "251 - 600"),
      ),
      tr(
        { style: "background-color: #F3B901; color: #000000;" },
        td({ style: "text-align: right; padding: 0.25rem;" }, "High:"),
        td({ style: "text-align: center; padding: 0.25rem;" }, "181 - 250"),
      ),
      tr(
        { style: "background-color: #1BD881; color: #000000;" },
        td({ style: "text-align: right; padding: 0.25rem;" }, "Target:"),
        td({ style: "text-align: center; padding: 0.25rem;" }, "70 - 180"),
      ),
      tr(
        { style: "background-color: #FF3B30; color: #FFFFFF;" },
        td({ style: "text-align: right; padding: 0.25rem;" }, "Low:"),
        td({ style: "text-align: center; padding: 0.25rem;" }, "54 - 69"),
      ),
      tr(
        { style: "background-color: #D12A2E; color: #FFFFFF;" },
        td({ style: "text-align: right; padding: 0.25rem; border-radius: 0;" }, "Very low:"),
        td({ style: "text-align: center; padding: 0.25rem; border-radius: 0;" }, "20 - 53"),
      ),
    ),
  );
}