import { Component, h, Host, Prop } from '@stencil/core';
import { getOrDefault } from '../../../utils';
export class CostBreakdownSection {
  render() {
    return (h(Host, { class: "d-flex flex-column justify-content-between text-left mb-3" },
      h("span", { class: "pb-2" }, "Here\u2019s an estimate based on your kms:"),
      h("span", { class: "text-muted text-right" }, "(per pay)"),
      this.generateLine('Finance', this.quote.financedAmount),
      this.generateLine('Fuel', this.quote.fuel),
      this.generateLine('Servicing and maintenance', this.quote.serviceAndMaintenance),
      this.generateLine('Registration and CTP', this.quote.registrationAndCtp),
      this.generateLine('Comprehensive insurance', this.quote.comprehensiveInsurance),
      this.generateLine('Management fee', this.quote.managementFee)));
  }
  generateLine(name, value) {
    return (h("div", { class: "d-flex flex-row" },
      h("span", { class: "d-flex-inline flex-grow-1 text-left" }, name),
      h("span", { class: "d-flex-inline text-right" },
        "$",
        getOrDefault(value, null))));
  }
  static get is() { return "ap-ben-cost-breakdown-section"; }
  static get properties() { return {
    "quote": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "QuoteResult",
        "resolved": "{ afterTaxEffectPerPayCycle: Option<number>; taxSaving: Option<number>; residualValue: Option<number>; financedAmount: Option<number>; fuel: Option<number>; serviceAndMaintenance: Option<number>; registrationAndCtp: Option<number>; comprehensiveInsurance: Option<number>; managementFee: Option<number>; quoteState: \"Not calculated\" | \"Calculation pending\" | \"Calculated\"; }",
        "references": {
          "QuoteResult": {
            "location": "import",
            "path": "../services/session.store"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
}
