import { Component, h, Prop } from '@stencil/core';
import benefitsEventTrackingService from '../../../services/event-tracking.service';
export class BenefitListItem {
  constructor() {
    this.onBenefitButtonClick = async () => {
      if (this.benefit.url === null)
        return;
      window.open(this.benefit.url, '_blank');
      await benefitsEventTrackingService.trackBenefitLinkClickedAsync(this.benefitWithId);
    };
  }
  render() {
    return (h("div", { class: "uiid-view-benefit-item-exist row align-items-top py-3 mx-0" },
      h("div", { class: "col-4 col-md-2 col-lg-1 px-0" },
        h("div", { class: "ml-0 my-lg-3 my-sm-2 my-xs-2 mr-3" }, this.IconElement())),
      h("div", { class: "col-12 col-lg-8 text-left px-lg-2 px-0 pt-lg-0 pt-3" },
        h("h4", { class: "card-title mb-1 text-break" }, this.benefit.title),
        h("span", { class: "benefit-value-description text-break" }, this.benefit.subtitle),
        this.benefit.subtitle && ' - ',
        h("span", { class: "text-muted" }, this.benefit.category),
        h("p", { class: "mb-0 pt-lg-3 pt-4 text-break" }, this.benefit.description)),
      h("div", { class: "col-12 col-lg-3 px-0 d-flex justify-content-end align-items-start" },
        this.openAttachmentButton(),
        this.learnMoreButton())));
  }
  get benefit() {
    return this.benefitWithId.benefit;
  }
  learnMoreButton() {
    if (this.benefit.url === null || this.benefit.url === '') {
      return undefined;
    }
    return (h("button", { type: "button", class: "uiid-validate-benefit-url-exist d-block d-lg-inline-block btn btn-light px-4 py-2 ml-2", onClick: async () => this.onBenefitButtonClick() }, "Learn more"));
  }
  openAttachmentButton() {
    var _a;
    if (this.benefit.attachments === null || ((_a = this.benefit.attachments) === null || _a === void 0 ? void 0 : _a.length) === 0) {
      return undefined;
    }
    return (h("a", { class: "uiid-validate-benefit-doc-exist d-block d-lg-inline-block btn btn-light px-4 py-2", target: "_blank", href: this.benefit.attachments[0].downloadUrl, onClick: (_) => benefitsEventTrackingService.trackBenefitAttachmentClickedAsync(this.benefitWithId) },
      h("span", null, "View")));
  }
  IconElement() {
    if (this.benefit.icon !== null) {
      return (h("img", { src: this.benefit.icon.downloadUrl, class: "img-responsive benefit-image", alt: "benefit-icon" }));
    }
    else {
      return h("ap-ben-icon", { class: "text-black-50 fa-3x", iconPrefix: "fad", iconId: "award" });
    }
  }
  static get is() { return "ap-ben-benefit-list-item"; }
  static get originalStyleUrls() { return {
    "$": ["benefit-list-item.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["benefit-list-item.css"]
  }; }
  static get properties() { return {
    "benefitWithId": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "BenefitWithIdDto",
        "resolved": "{ benefitId: string; benefit: BenefitItemDto; }",
        "references": {
          "BenefitWithIdDto": {
            "location": "import",
            "path": "../../../apis/benefits-api/benefits-api.dto"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
}
