import { Component, h, Host, Prop, State } from '@stencil/core';
import { isSome, none } from 'fp-ts/Option';
import { Subscription } from 'rxjs';
import { getOrError } from '../../../../../utils';
import navigationService from '../../../services/navigation.service';
import { ManagePageRouteName } from '../manage-benefits-page.routes';
import editBenefitQuery from './edit-benefit.query';
import editBenefitService from './edit-benefit.service';
export class EditBenefitPage {
  constructor() {
    this.benefitId = none;
    this.showDeleteConfirmDialog = false;
    this.showCancelConfirmDialog = false;
    this.isLoading = false;
    this.isValidationDisplayed = false;
    this.stateSubscription = new Subscription();
  }
  async componentWillLoad() {
    await this.initialiseAsync();
  }
  disconnectedCallback() {
    this.stateSubscription.unsubscribe();
  }
  render() {
    return (h(Host, { class: "w-100" },
      h("ap-ben-ui-container", { class: "w-100 d-none" },
        h("div", { class: "row my-5" },
          h("div", { class: "uiid-new-edit-delete-benefit-page col-12" },
            h("h3", null, this.editMode === 'add' ? 'New Benefit' : 'Edit Benefit'),
            h("ap-ben-edit-benefit-form", { class: "d-block mt-4 mb-3", disabled: this.isLoading, isValidationDisplayed: this.isValidationDisplayed }),
            this.renderActionBar()))),
      this.showDeleteConfirmDialog && this.renderDeleteConfirmDialog(),
      this.showCancelConfirmDialog && this.renderCancelConfirmDialog()));
  }
  renderActionBar() {
    return (h("div", { class: "row" },
      h("div", { class: "col-12 d-flex" },
        h("button", { hidden: this.editMode === 'add', class: "uiid-delete-benefit-item btn btn-outline-danger", onClick: (_) => {
            this.showDeleteConfirmDialog = true;
          } }, "Delete"),
        h("div", { class: "ml-auto" },
          h("button", { class: "btn btn-light mr-3", onClick: (_) => this.onCancelClicked() }, "Cancel"),
          h("button", { class: "uiid-publish-benefit btn btn-primary", onClick: (_) => this.publishBenefit(), disabled: this.isLoading }, "Publish")))));
  }
  renderDeleteConfirmDialog() {
    return (h("ap-ben-modal-section", { show: this.showDeleteConfirmDialog, showHeader: true, modalTitle: "Delete benefit", onModalClosed: (_) => {
        this.showDeleteConfirmDialog = false;
      } },
      h("ap-ben-confirm-dialog", { acceptText: "Delete", declineText: "Cancel", dialogStyle: "danger", onAccepted: async (_) => {
          await this.deleteBenefitAsync();
          this.showDeleteConfirmDialog = false;
        }, onDeclined: (_) => {
          this.showDeleteConfirmDialog = false;
        } },
        h("p", null,
          h("strong", null,
            "\"",
            getOrError(this.selectedBenefit).title.value,
            "\""),
          " will be permanently deleted from your benefits. Are you sure you want to delete it?"))));
  }
  renderCancelConfirmDialog() {
    return (h("ap-ben-modal-section", { show: this.showCancelConfirmDialog, showHeader: true, modalTitle: "Unsaved changes", onModalClosed: (_) => {
        this.showCancelConfirmDialog = false;
      } },
      h("ap-ben-confirm-dialog", { acceptText: "Publish", declineText: "Discard", dialogStyle: "warning", onAccepted: async (_) => {
          this.showCancelConfirmDialog = false;
          await this.publishBenefit();
        }, onDeclined: (_) => {
          this.showCancelConfirmDialog = false;
          this.navigateToManageBenefits();
        } }, this.editMode === 'add' ? ('Do you want to save your new benefit?') : (h("p", null,
        h("strong", null,
          "\"",
          getOrError(this.selectedBenefit).title.value,
          "\""),
        " has been modified. Do you want to publish your changes?")))));
  }
  async initialiseAsync() {
    this.stateSubscription.add(editBenefitQuery.isLoading$.subscribe((isLoading) => (this.isLoading = isLoading)));
    this.stateSubscription.add(editBenefitQuery.selectedBenefit$.subscribe((selectedBenefit) => (this.selectedBenefit = selectedBenefit)));
    this.stateSubscription.add(editBenefitQuery.draftBenefit$.subscribe((draftBenefit) => (this.draftBenefit = draftBenefit)));
    if (isSome(this.benefitId)) {
      this.editMode = 'edit';
      editBenefitService.loadExistingBenefitForEditingAsync(this.benefitId.value);
    }
    else {
      editBenefitService.createDraftBenefit();
      this.editMode = 'add';
    }
  }
  navigateToManageBenefits() {
    editBenefitService.clearDraftBenefit();
    navigationService.navigateInternally(ManagePageRouteName);
  }
  async publishBenefit() {
    if (!getOrError(this.draftBenefit).isValid) {
      this.isValidationDisplayed = true;
      return;
    }
    if (getOrError(this.draftBenefit).isDirty) {
      await editBenefitService.publishDraftBenefitAsync();
    }
    this.navigateToManageBenefits();
  }
  async onCancelClicked() {
    if (!getOrError(this.draftBenefit).isDirty) {
      this.navigateToManageBenefits();
      return;
    }
    this.showCancelConfirmDialog = true;
  }
  async deleteBenefitAsync() {
    await editBenefitService.deleteSelectedBenefitAsync();
    this.navigateToManageBenefits();
  }
  static get is() { return "ap-ben-edit-benefit-page"; }
  static get properties() { return {
    "benefitId": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Option<BenefitId>",
        "resolved": "None | Some<string>",
        "references": {
          "Option": {
            "location": "import",
            "path": "fp-ts/Option"
          },
          "BenefitId": {
            "location": "import",
            "path": "../store/manage-benefits.store"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "none"
    }
  }; }
  static get states() { return {
    "editMode": {},
    "selectedBenefit": {},
    "draftBenefit": {},
    "showDeleteConfirmDialog": {},
    "showCancelConfirmDialog": {},
    "isLoading": {},
    "isValidationDisplayed": {}
  }; }
}
