import { Component, Element, h, State } from "@stencil/core";
import { App } from "smoothly";
import * as model from "@payfunc/model";
export class ComponentDemo {
  async componentWillLoad() {
    model.Connection.baseUrl = "https://api.payfunc.com/";
    model.Connection.key = "";
  }
  render() {
    const items = [
      {
        number: "ts001-b",
        name: "Basic T-shirt, black",
        price: 119.6,
        vat: 29.9,
        quantity: 5,
      },
      {
        number: "ts001-w",
        name: "Basic T-shirt, white",
        price: 200.0,
        vat: 50.0,
        quantity: 10,
      },
    ];
    return (h(App, { label: "Component Demo" },
      h("ig-user-menu", { slot: "nav-end", "user-name": "Test User AB" }),
      h("smoothly-room", { path: "item", label: "Items" },
        h("ig-items-display", { items: items, currency: "SEK" }),
        h("ig-items-display", { items: 1337.4222, currency: "SEK" })),
      h("smoothly-room", { label: "Orders", path: "order" },
        h("ig-orders", { orders: this.orders })),
      h("smoothly-room", { path: "onboard", label: "Onboard" },
        h("onboard-demo", null))));
  }
  static get is() { return "component-demo"; }
  static get states() { return {
    "orders": {},
    "t": {}
  }; }
  static get elementRef() { return "element"; }
}
