import { r as registerInstance, h } from './index-31949dc5.js';
import { f as format } from './index-e6b3332e.js';

const logItemCss = "fireenjin-log-item{display:block}fireenjin-log-item ion-label{margin-top:0}fireenjin-log-item fireenjin-json-viewer{max-height:60px;display:block;overflow:hidden;transition:all ease 0.3s}fireenjin-log-item:hover fireenjin-json-viewer{cursor:pointer;max-height:none}fireenjin-log-item h3{color:var(--ion-color-medium);text-indent:10px}";

const LogItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.type = undefined;
    this.name = undefined;
    this.resolveTime = undefined;
    this.input = undefined;
    this.output = undefined;
    this.createdAt = undefined;
    this.lines = undefined;
  }
  formatDate(timestamp) {
    return format(new Date(Date.parse(timestamp)), "MM/dd/yyyy @ hh:mm aaa");
  }
  render() {
    return (h("ion-item", { lines: this.lines }, h("ion-label", { class: "ion-text-wrap" }, h("ion-grid", null, h("ion-row", null, h("ion-col", null, h("h2", null, this.type, " - ", this.name, " ", this.resolveTime ? `(${this.resolveTime}ms)` : "")), h("ion-col", { style: {
        display: "flex",
        justifyContent: "flex-end",
      } }, h("small", { style: {
        color: "var(--ion-color-medium)",
      } }, this.formatDate(this.createdAt)))), h("ion-row", null, h("ion-col", null, h("h3", null, "Input"), h("fireenjin-json-viewer", { innerHTML: typeof this.input === "object"
        ? JSON.stringify(this.input)
        : this.input })), h("ion-col", null, h("h3", null, "Output"), h("fireenjin-json-viewer", { innerHTML: typeof this.output === "object"
        ? JSON.stringify(this.output)
        : this.output })))))));
  }
};
LogItem.style = logItemCss;

export { LogItem as fireenjin_log_item };
