import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
import { h, Host } from '@stencil/core';
export class EzCardItem {
  constructor() {
    this.item = undefined;
    this.enableKey = true;
    this.compacted = false;
  }
  componentWillRender() {
    this.createDetailList();
  }
  componentDidLoad() {
    var _a, _b;
    const dataInfo = { id: StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
  }
  createDetailList() {
    var _a, _b, _c;
    this._details = { detailsLeft: [], detailsRight: [] };
    let cont = 0;
    if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
      for (const attribute in this.item.details) {
        cont < 3 ?
          this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
          this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
        cont++;
      }
    }
  }
  buildDetailContentTitle(detail) {
    var _a, _b;
    if ((detail === null || detail === void 0 ? void 0 : detail.label) == undefined && (detail === null || detail === void 0 ? void 0 : detail.value) == undefined)
      return;
    const cleanLabel = (_a = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.label)) === null || _a === void 0 ? void 0 : _a.replace(/<[^>]*>/g, '');
    const cleanValue = (_b = StringUtils.replaceAccentuatedCharsHtmlEntities(detail === null || detail === void 0 ? void 0 : detail.value)) === null || _b === void 0 ? void 0 : _b.replace(/<[^>]*>/g, '');
    return `${cleanLabel}: ${cleanValue}`;
  }
  buildDetailContent(detail) {
    return h("div", { class: `card-item__detail ${this.compacted ? "" : "card-item__detail-default"}`, title: this.buildDetailContentTitle(detail) }, h("label", { class: `card-item__detail-label ${this.compacted ? "card-item__detail-label-compacted" : ""}` }, `${detail.label}: `), " ", h("label", { class: `card-item__detail-value ${this.compacted ? "card-item__detail-value-compacted" : ""}`, innerHTML: detail.value }));
  }
  render() {
    return (h(Host, null, this.item &&
      h("div", { class: `card-item ${this.compacted ? "card-item__compacted" : "card-item__expanded"} `, onClick: () => { this.ezClick.emit(this.item); } }, h("div", { class: "ez-row card-item__content" }, h("div", { class: "ez-col ez-col--sd-11 card-item__details" }, h("label", { class: `card-item__title ${this.compacted ? "card-item__title-compacted" : ""}` }, this.enableKey && (h("span", { class: "card-item__key", innerHTML: this.item.key })), h("span", { innerHTML: this.item.title })), h("div", { class: `${this.compacted ? "card-item__details-container_compacted" : "card-item__details-container_default"}` }, h("div", { class: `card-item__details-container__left ${this.compacted ? "card-item__details-container__left-compacted" : ""}` }, this._details.detailsLeft.map(detail => {
        return this.buildDetailContent(detail);
      })), h("div", { class: `card-item__details-container__right ${this.compacted ? "card-item__details-container__right-compacted" : ""}` }, this._details.detailsRight.map(detail => {
        return this.buildDetailContent(detail);
      })))), h("div", { class: "ez-col ez-col--sd-1 card-item__details-slot" }, h("slot", { name: "rightSlot" }))))));
  }
  static get is() { return "ez-card-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-card-item.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-card-item.css"]
    };
  }
  static get properties() {
    return {
      "item": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "CardItem",
          "resolved": "CardItem",
          "references": {
            "CardItem": {
              "location": "local"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determina o conte\u00FAdo do card. Deve conter um objeto no formato:\n`{title: string, key: string, details: any}`."
        }
      },
      "enableKey": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determina se a chave do item deve ser exibida."
        },
        "attribute": "enable-key",
        "reflect": false,
        "defaultValue": "true"
      },
      "compacted": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determina se o componente ser\u00E1 apresentado no modo compacto."
        },
        "attribute": "compacted",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get events() {
    return [{
        "method": "ezClick",
        "name": "ezClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emitido sempre que o ez-card \u00E9 clicado."
        },
        "complexType": {
          "original": "CardItem",
          "resolved": "CardItem",
          "references": {
            "CardItem": {
              "location": "local"
            }
          }
        }
      }];
  }
  static get elementRef() { return "_element"; }
}
