import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import { isDefined } from "../model";
import * as translation from "./translation";
export class IntergiroTable {
  constructor() {
    this.selectable = false;
    this.selected = {};
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  handleToggle(event) {
    const selected = this.selected;
    if (event.detail.checked)
      selected[event.detail.id] = event.detail.value;
    else
      delete selected[event.detail.id];
    this.selectedChanged.emit((this.selected = selected));
  }
  onChecked(event) {
    this.selectedChanged.emit(event.detail.selected ? { allSelected: true } : {});
  }
  render() {
    const t = this.t;
    return [
      !this.value ? (h("p", null, t("Loading") + " " + this.name + " " + t("from server..."))) : this.value.length > 0 ? ([
        h("table", null,
          h("thead", null,
            h("tr", null,
              this.selectable && (h("th", { class: "checkbox", color: "light" },
                h("smoothly-checkbox", { "select-all": true }))),
              this.header.filter(isDefined).map(v => (h("th", { class: v.align == "right" ? "right" : "", color: "light" }, v.name))))),
          h("slot", null)),
      ]) : (h("p", null, t("There are no") + " " + this.name + " " + t("to display."))),
    ];
  }
  static get is() { return "ig-table"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "any[]",
        "resolved": "any[] | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": false
    },
    "header": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "({ name: string; align?: \"right\" | \"left\" } | undefined)[]",
        "resolved": "({ name: string; align?: \"right\" | \"left\" | undefined; } | undefined)[]",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "selectable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean | undefined",
        "resolved": "boolean | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selectable",
      "reflect": false,
      "defaultValue": "false"
    },
    "selected": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "Record<string, any | undefined>",
        "resolved": "{ [x: string]: any; }",
        "references": {
          "Record": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "{}"
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get events() { return [{
      "method": "selectedChanged",
      "name": "selectedChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Record<string, any | undefined>",
        "resolved": "{ [x: string]: any; }",
        "references": {
          "Record": {
            "location": "global"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "valueSelected",
      "method": "handleToggle",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "checked",
      "method": "onChecked",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
