import { Component, getAssetPath, h, Host, State } from '@stencil/core';
import * as O from 'fp-ts/Option';
import { getOrDefault } from '../../../utils';
import eventTrackingService from '../services/event-tracking.service';
import sessionQuery from '../services/session.query';
import appConfigurationService from '../services/app-configuration.service';
export class QuoteResultSection {
  constructor() {
    this.showRequestQuoteModal = false;
    this.showBreakdownModal = false;
    this.showCompletePage = false;
    this.getRenderedPaymentPeriod = () => {
      const selectedPaymentPeriod = O.getOrElse(() => 'Monthly')(sessionQuery.user.paymentPeriod);
      let renderedPaymentPeriod = 'month';
      switch (selectedPaymentPeriod) {
        case 'Monthly':
          renderedPaymentPeriod = 'month';
          break;
        case 'Fortnightly':
          renderedPaymentPeriod = 'fortnight';
          break;
        case 'Weekly':
          renderedPaymentPeriod = 'week';
      }
      return `Cost per ${renderedPaymentPeriod}`;
    };
    this.renderQuoteField = (quoteField) => {
      var _a;
      return (h("span", null,
        "$",
        this.quote.quoteState === 'Calculation pending' ? (h("fl-loading-indicator", { class: "ml-2" })) : ((_a = getOrDefault(quoteField, null)) === null || _a === void 0 ? void 0 : _a.toFixed(0))));
    };
    this.leaseInclusion = (props) => (h("p", { class: "font-weight-light d-inline-flex align-items-center" },
      h("img", { class: "pr-1", src: getAssetPath('./assets/check.svg') }),
      props.inclusionName));
  }
  componentWillLoad() {
    this.subscription = sessionQuery.result$.subscribe((_state) => {
      this.quote = sessionQuery.result;
    });
  }
  disconnectedCallback() {
    this.subscription.unsubscribe();
  }
  render() {
    return (h(Host, { class: "card d-flex flex-column justify-content-between w-100 h-100" },
      h("div", { class: "d-flex flex-column flex-grow-1 justify-content-between p-4" },
        h("span", { class: "mb-3 text-left" },
          appConfigurationService.isPaidCampaign && (h("p", { class: "blur h1 text-muted font-weight-bold mb-0" }, "$0000")),
          !appConfigurationService.isPaidCampaign && (h("p", { class: "h1 text-muted font-weight-bold mb-0" }, this.renderQuoteField(this.quote.afterTaxEffectPerPayCycle))),
          h("p", { class: "mb-0 pt-1 h5" },
            h("span", { ref: (el) => (this.costTitleElement = el) },
              this.getRenderedPaymentPeriod(),
              h("ap-ben-asset", { class: "pl-2", image: "icon-info.svg" })),
            h("ap-ben-tooltip", { target: this.costTitleElement, style: { 'max-width': '15rem' } },
              h("p", { class: "px-3 h6 py-2 mb-0 text-left text-break text-wrap" }, "The cost to you each pay cycle including all running costs.")))),
        h("span", { class: "mb-3 text-left" },
          appConfigurationService.isPaidCampaign && (h("p", { class: "blur h1 text-info font-weight-bold mb-0" }, "$0000")),
          !appConfigurationService.isPaidCampaign && (h("p", { class: "h1 text-info font-weight-bold mb-0" }, this.renderQuoteField(this.quote.taxSaving))),
          h("p", { class: "mb-0 pt-1 h5" },
            h("span", { ref: (el) => (this.totalSavingsTitleElement = el) },
              "Total tax savings",
              h("ap-ben-asset", { class: "pl-2", image: "icon-info.svg" })),
            h("ap-ben-tooltip", { target: this.totalSavingsTitleElement, style: { 'max-width': '15rem' } },
              h("p", { class: "px-3 h6 py-2 mb-0 text-left text-break text-wrap" }, "The total amount you will save over the life of your lease term by salary packaging this vehicle.")))),
        h("span", { class: "mb-3 text-left" },
          appConfigurationService.isPaidCampaign && (h("p", { class: "blur h1 text-muted font-weight-bold mb-0" }, "$0000")),
          !appConfigurationService.isPaidCampaign && (h("p", { class: "h1 text-muted font-weight-bold mb-0" }, this.renderQuoteField(this.quote.residualValue))),
          h("p", { class: "mb-0 pt-1 h5" },
            h("span", { ref: (el) => (this.residualValueTitleElement = el) },
              "Residual value",
              h("ap-ben-asset", { class: "pl-2", image: "icon-info.svg" })),
            h("ap-ben-tooltip", { target: this.residualValueTitleElement, style: { 'max-width': '15rem' } },
              h("p", { class: "px-3 h6 py-2 mb-0 text-left text-break text-wrap" }, "The outstanding amount at the end of the lease term.")))),
        h("fl-button", { class: "mt-2", isBlockElement: true, onClick: () => {
            this.showRequestQuoteModal = true;
            eventTrackingService.trackStepProgressedAsync({ stepName: 'quote' });
            eventTrackingService.trackModalViewedAsync({ modal: 'quoteRequest' });
          } },
          appConfigurationService.isPaidCampaign && h("span", null, "See savings estimate"),
          !appConfigurationService.isPaidCampaign && h("span", null, "Enquire now"))),
      h("div", { class: "bg-light px-4 py-3" },
        h("p", { class: "font-weight-bold text-center" }, "Your lease includes"),
        h("div", { class: "d-flex flex-row align-items-center justify-content-between" },
          h("span", { class: "d-flex flex-column" },
            h(this.leaseInclusion, { inclusionName: "Finance" }),
            h(this.leaseInclusion, { inclusionName: "Servicing" })),
          h("span", { class: "d-flex flex-column" },
            h(this.leaseInclusion, { inclusionName: "Insurance" }),
            h(this.leaseInclusion, { inclusionName: "Registration" })),
          h("span", { class: "d-flex flex-column" },
            h(this.leaseInclusion, { inclusionName: "Fuel" }),
            h(this.leaseInclusion, { inclusionName: "Tyres" }))),
        !appConfigurationService.isPaidCampaign && (h("fl-button", { class: "mt-2", isBlockElement: true, variant: "secondary", onClick: () => {
            this.showBreakdownModal = true;
            eventTrackingService.trackModalViewedAsync({ modal: 'runningCostBreakdown' });
          } }, "View running cost breakdown"))),
      h("ap-ben-modal-section", { show: this.showRequestQuoteModal, showHeader: true, onModalClosed: () => {
          this.showRequestQuoteModal = false;
          this.showCompletePage = false;
          eventTrackingService.trackStepProgressedAsync({ stepName: 'leaseInformation' });
          eventTrackingService.trackModalClosedAsync({ modal: 'quoteRequest' });
        } }, this.showCompletePage ? (h("ap-ben-complete-section", { onClosed: () => {
          this.showRequestQuoteModal = false;
          this.showCompletePage = false;
        } })) : (h("ap-ben-submit-quote-section", { onEnquirySubmitted: () => {
          this.showCompletePage = true;
        } }))),
      h("ap-ben-modal-section", { show: this.showBreakdownModal, modalTitle: "Running cost breakdown", onModalClosed: () => {
          this.showBreakdownModal = false;
          eventTrackingService.trackModalClosedAsync({ modal: 'runningCostBreakdown' });
        }, showHeader: true, showFooter: true },
        h("ap-ben-cost-breakdown-section", { quote: this.quote }))));
  }
  static get is() { return "ap-ben-quote-result-section"; }
  static get originalStyleUrls() { return {
    "$": ["quote-result-section.component.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["quote-result-section.component.css"]
  }; }
  static get assetsDirs() { return ["assets"]; }
  static get states() { return {
    "quote": {},
    "showRequestQuoteModal": {},
    "showBreakdownModal": {},
    "showCompletePage": {}
  }; }
}
