import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import { DateTime } from "isoly";
import * as translation from "./translation";
export class PortalDisplayDefer {
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  componentDidLoad() {
    const icons = this.element.getElementsByTagName("svg");
    if (icons.length > 0) {
      const handle = (e) => {
        e.stopPropagation();
        e.preventDefault();
        if (!this.selected) {
          this.selected = true;
          this.timer = window.setTimeout(() => {
            this.selected = false;
          }, 2000);
        }
        else {
          if (this.timer) {
            window.clearTimeout(this.timer);
            this.timer = undefined;
          }
          this.paymentCancel.emit({ order: this.order });
          this.selected = false;
        }
      };
      icons[0].addEventListener("click", handle);
      icons[0].addEventListener("touch", handle);
      icons[1].addEventListener("click", handle);
      icons[1].addEventListener("touch", handle);
    }
  }
  render() {
    const t = this.t;
    const payment = this.order.payment;
    return [
      h("td", null),
      h("td", null, this.order.number),
      h("td", null, payment.contact),
      h("smoothly-display-amount", { amount: payment.amount, currency: this.order.currency }),
      h("td", null),
      h("smoothly-display-date-time", { datetime: DateTime.localize(DateTime.parse(payment.created)) }),
      h("td", null,
        h("smoothly-icon", { name: "trash", toolTip: t("Remove order"), style: { display: this.selected ? "none" : "" } }),
        h("smoothly-icon", { name: "warning", toolTip: t("Confirm removal"), style: { display: this.selected ? "" : "none" }, fill: "clear", color: "danger" })),
    ];
  }
  static get is() { return "portal-display-defer"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "order": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Order",
        "resolved": "Order",
        "references": {
          "Order": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "selected": {},
    "t": {}
  }; }
  static get events() { return [{
      "method": "paymentCancel",
      "name": "paymentCancel",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
}
