import { Component, Event, h, Prop } from '@stencil/core';
import { pipe } from 'fp-ts/lib/pipeable';
import * as O from 'fp-ts/Option';
import manageBenefitsService from '../manage-benefits.service';
export class ManagedBenefitItem {
  render() {
    return (h("div", { class: "border-top py-3 px-3 row d-flex align-items-center no-gutters", onClick: () => this.onBenefitClick() },
      h("div", { class: "col-12 col-md-5 col-lg-6" },
        h("span", { class: {
            'm-0 text-truncate': true,
            'text-muted': !this.benefit.visibility.isEnabled
          } }, this.benefit.title)),
      h("div", { class: "col-12 col-md-2 text-muted text-truncate" }, this.benefit.category),
      h("div", { class: "col-12 col-md-2 text-muted text-truncate" }, this.formatDate(this.benefit.lastModifiedDate)),
      h("div", { class: "col-12 col-md-3 col-lg-2 mt-4 mt-md-0 text-right" }, this.benefit.visibility.isEnabled ? (h("fl-promise-button", { class: "uiid-deactivate-benefit-item", isBlockElement: true, variant: "secondary", onClick: (event) => {
          event.stopPropagation();
        }, promiseFn: () => this.onSetInactive() },
        h("h6", { class: "my-0" }, "Deactivate"))) : (h("fl-promise-button", { class: "uiid-activate-benefit-item", isBlockElement: true, variant: "secondary", onClick: (event) => {
          event.stopPropagation();
        }, promiseFn: () => this.onSetActive() },
        h("h6", { class: "my-0" }, "Activate"))))));
  }
  onBenefitClick() {
    this.editBenefitButtonClicked.emit(this.benefit);
  }
  async onSetActive() {
    await manageBenefitsService.enableBenefitAsync(this.benefit.id);
  }
  async onSetInactive() {
    await manageBenefitsService.disableBenefitAsync(this.benefit.id);
  }
  formatDate(dateString) {
    return pipe(dateString, O.map((dateStringOption) => new Date(dateStringOption).toLocaleDateString('en-AU', {
      day: 'numeric',
      month: 'short',
      year: 'numeric'
    })), O.getOrElse(() => ''));
  }
  static get is() { return "ap-ben-managed-benefit-item"; }
  static get originalStyleUrls() { return {
    "$": ["managed-benefit-item.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["managed-benefit-item.css"]
  }; }
  static get properties() { return {
    "benefit": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "CustomBenefitsListEntry",
        "resolved": "{ id: string; title: string; category: string; lastModifiedDate: Option<string>; visibility: AccountBenefitVisibility; }",
        "references": {
          "CustomBenefitsListEntry": {
            "location": "import",
            "path": "../store/manage-benefits.store"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get events() { return [{
      "method": "editBenefitButtonClicked",
      "name": "editBenefitButtonClicked",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "CustomBenefitsListEntry",
        "resolved": "{ id: string; title: string; category: string; lastModifiedDate: Option<string>; visibility: AccountBenefitVisibility; }",
        "references": {
          "CustomBenefitsListEntry": {
            "location": "import",
            "path": "../store/manage-benefits.store"
          }
        }
      }
    }]; }
}
