import * as React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import * as UI from "../dist/index.js";

const h = React.createElement;
const noop = () => {};

const cases = [
  { name: "Pill", el: h(UI.Pill, {}, "Text") },
  { name: "IconButton", el: h(UI.IconButton, { "aria-label": "x" }, "*") },
  { name: "Fig", el: h(UI.Fig, { value: 42, unit: "km" }) },
  { name: "StatusRow", el: h(UI.StatusRow, { status: "ok", title: "Titel", subtitle: "Sub" }) },
  { name: "ActionButton", el: h(UI.ActionButton, {}, "Aktion") },
  { name: "Switch", el: h(UI.Switch, { checked: true, onChange: noop }) },
  {
    name: "Seg",
    el: h(UI.Seg, {
      options: [{ value: "a", label: "A" }, { value: "b", label: "B" }],
      value: "a",
      onChange: noop,
    }),
  },
  {
    name: "RowList",
    el: h(UI.RowList, { items: [{ key: 1, label: "L", value: "V", subValue: "SV" }] }),
  },
  { name: "LeafRow", el: h(UI.LeafRow, { title: "T", value: "V" }) },
  { name: "Tile", el: h(UI.Tile, {}, "Inhalt") },
  { name: "Tile (button)", el: h(UI.Tile, { variant: "button", chevron: true, onClick: noop }, "Klick") },
  { name: "Feld", el: h(UI.Feld, { label: "L", value: "V" }) },
  { name: "ProgressRing", el: h(UI.ProgressRing, { percent: 42, unit: "%" }) },
  { name: "ProgressBar (single)", el: h(UI.ProgressBar, { percent: 50 }) },
  {
    name: "ProgressBar (segments)",
    el: h(UI.ProgressBar, { segments: [{ value: 3, label: "A" }, { value: 1, label: "B" }] }),
  },
  {
    name: "StatGrid",
    el: h(UI.StatGrid, { items: [{ value: 1, caption: "C" }, { value: 2, caption: "C2" }] }),
  },
  { name: "Accordion", el: h(UI.Accordion, { title: "T", defaultOpen: true }, "Body") },
  { name: "SwipeRow", el: h(UI.SwipeRow, { onDelete: noop }, "Zeile") },
  {
    name: "TabBar",
    el: h(UI.TabBar, {
      items: [{ key: "a", label: "A", icon: h("svg") }],
      activeKey: "a",
      onChange: noop,
    }),
  },
  {
    name: "Popup",
    el: h(UI.Popup, { open: true, onClose: noop }, h(UI.PopupMenuItem, {}, "Item")),
  },
  { name: "ImagePlaceholder", el: h(UI.ImagePlaceholder, { alt: "a", label: "Label" }) },
];

let failed = 0;
for (const c of cases) {
  try {
    const html = renderToStaticMarkup(c.el);
    if (!html || html.length === 0) throw new Error("empty output");
    console.log(`PASS  ${c.name}`);
  } catch (err) {
    failed++;
    console.log(`FAIL  ${c.name}: ${err.message}`);
  }
}

console.log(`\n${cases.length - failed}/${cases.length} passed`);
if (failed > 0) process.exit(1);