import { Component, h, Host, State } from '@stencil/core';
import { Subscription } from 'rxjs';
import navigationService from '../../services/navigation.service';
import manageBenefitsService from './manage-benefits.service';
import { AddBenefitPageRouteName, EditBenefitPageRouteName } from './manage-benefits-page.routes';
import manageBenefitsQuery from './store/manage-benefits.query';
export class ManageBenefitsPage {
  constructor() {
    this.showDisabledBenefits = false;
    this.storeSubscription = new Subscription();
  }
  componentWillLoad() {
    manageBenefitsService.loadPageStateAsync();
    this.storeSubscription.add(manageBenefitsQuery.manageBenefitsPageState$.subscribe((pageState) => (this.pageState = pageState)));
    this.storeSubscription.add(manageBenefitsQuery.isLoading$.subscribe((isLoading) => (this.isLoading = isLoading)));
  }
  disconnectedCallback() {
    this.storeSubscription.unsubscribe();
  }
  render() {
    if (this.isLoading) {
      return (h(Host, { class: "w-100 text-center mt-5" },
        h("ap-ben-ui-container", { class: "w-100 d-none" },
          h("fl-loading-indicator", null))));
    }
    return (h(Host, { class: "w-100" },
      h("ap-ben-ui-container", { class: "w-100 d-none" },
        this.managedBenefitHeader(),
        h("div", { class: "uiid-manage-benefit-body row bg-white border-left border-right border-bottom mb-5 mx-0 rounded no-gutters" },
          h("div", { class: "col-12" },
            this.pageState.enabledBenefits.length === 0 ? (h("ap-ben-empty-benefits", { onNewBenefitButtonClicked: () => this.addBenefit() })) : (this.ActiveBenefitsSection()),
            this.ToggleInactiveBenefitsRow(),
            this.showDisabledBenefits && this.InactiveBenefitsSection())))));
  }
  ActiveBenefitsSection() {
    return [
      h("ap-ben-manage-benefits-header-row", { class: "d-none d-md-block" }),
      this.pageState.enabledBenefits.map((b) => (h("ap-ben-managed-benefit-item", { benefit: b, onEditBenefitButtonClicked: (event) => this.editBenefit(event.detail) })))
    ];
  }
  ToggleInactiveBenefitsRow() {
    return (h("div", { class: "col-12 py-3 border-top d-flex justify-content-center" },
      h("button", { class: "uiid-show-inactive-benefit-item btn btn-link", onClick: (_) => this.onToggleInactiveBenefits() },
        h("h6", { class: "m-0" }, this.showDisabledBenefits
          ? `Hide inactive benefits (${this.pageState.disabledBenefits.length})`
          : `Show inactive (${this.pageState.disabledBenefits.length})`))));
  }
  InactiveBenefitsSection() {
    if (this.pageState.disabledBenefits.length === 0) {
      return [
        h("div", { class: "row border-top py-3 px-3 d-flex align-items-center no-gutters" },
          h("div", { class: "col-12 my-1 d-flex justify-content-center" },
            h("span", { class: "text-muted" }, "No inactive benefits.")))
      ];
    }
    return this.pageState.disabledBenefits.map((b) => (h("ap-ben-managed-benefit-item", { benefit: b, onEditBenefitButtonClicked: (event) => this.editBenefit(event.detail) })));
  }
  managedBenefitHeader() {
    return (h("div", { class: "uiid-manage-benefit-header row mb-3 mt-5" },
      h("div", { class: "col-12 col-sm-6" },
        h("h3", null, "Manage Benefits")),
      h("div", { class: "col-12 col-sm-6 d-flex justify-content-end align-items-center" },
        h("fl-button", { class: "uiid-new-benefit-button", onClick: (_) => this.addBenefit() },
          h("ap-ben-icon", { class: "mr-2", iconPrefix: "far", iconId: "plus" }),
          "New benefit"))));
  }
  onToggleInactiveBenefits() {
    this.showDisabledBenefits = !this.showDisabledBenefits;
  }
  addBenefit() {
    navigationService.navigateInternally(AddBenefitPageRouteName);
  }
  editBenefit(benefit) {
    navigationService.navigateInternally(`${EditBenefitPageRouteName}/${benefit.id}`);
  }
  static get is() { return "ap-ben-manage-page"; }
  static get originalStyleUrls() { return {
    "$": ["manage-benefits-page.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["manage-benefits-page.css"]
  }; }
  static get states() { return {
    "showDisabledBenefits": {},
    "pageState": {},
    "isLoading": {}
  }; }
}
