import '@flarehr/beacon';
import { Component, h, Host, Prop, State } from '@stencil/core';
import * as O from 'fp-ts/Option';
import appConfigurationService from './services/app-configuration.service';
import eventTrackingService from './services/event-tracking.service';
import sessionQuery from './services/session.query';
import sessionStore from './services/session.store';
import viewService from './services/view.service';
export class CarsCalculatorApp {
  constructor() {
    this.areStylesLoaded = false;
    this.isModelSelected = false;
    this.isVariantSelected = false;
    this.isQuoteCalculated = false;
    this.renderVariantsList = () => (h("div", { class: "row" },
      h("div", { class: "col" },
        h("ap-ben-model-variants-section", null))));
    this.renderModelSelection = () => (h("div", { class: "row mt-4" },
      h("div", { class: "col" },
        h("ap-ben-choose-vehicle-section", null))));
    this.renderQuoteCalculation = () => [
      h("div", { class: "row mt-4" },
        h("div", { class: "col-12 col-md-6 col-lg-7 d-flex flex-column justify-content-between" },
          h("ap-ben-personal-info-section", null),
          h("div", { class: "mt-4 d-none d-lg-block" },
            h(this.disclaimer, null))),
        h("div", { class: "col-12 col-md-6 col-lg-5 mt-4 mt-md-0" }, this.isQuoteCalculated && h("ap-ben-quote-result-section", null))),
      h("div", { class: "row my-4 d-lg-none" },
        h("div", { class: "col-12" },
          h(this.disclaimer, null)))
    ];
    this.disclaimer = () => (h("div", { class: "bg-light p-4" }, "Figures shown are estimates only and are based on an estimated driveaway price of the vehicle which includes dealer delivery, CTP, Rego and Stamp duty."));
  }
  componentDidLoad() {
    appConfigurationService.apiBaseUrl = this.apiBaseUrl;
    appConfigurationService.isPaidCampaign = this.isPaidCampaign;
    sessionStore.setDistinctUserId(O.fromNullable(this.profileId));
    viewService.topElement = this.hostElement;
    return eventTrackingService.trackAppLoadedAsync();
  }
  componentWillLoad() {
    sessionQuery.vehicle$.subscribe((vehicle) => {
      this.isVariantSelected = O.isSome(vehicle.selectedVariant);
      this.isModelSelected = O.isSome(vehicle.bodyType);
    });
    sessionQuery.quote$.subscribe((quote) => {
      this.isQuoteCalculated = quote.quoteState !== 'Not calculated';
    });
  }
  render() {
    return (h(Host, { class: "d-flex flex-column flex-fill justify-content-between", ref: (el) => (this.hostElement = el) },
      this.fetchStyles(),
      this.areStylesLoaded && this.renderAppContent()));
  }
  fetchStyles() {
    return [
      h("link", { rel: "stylesheet", href: "https://npm-cdn.flarehr.com/@flarehr/beacon@dev/dist/beacon/beacon.css", media: "all", onLoad: () => (this.areStylesLoaded = true) })
    ];
  }
  renderAppContent() {
    return (h("div", { class: "abe-app-container d-flex flex-grow-1 justify-content-center" },
      h("div", { class: "container my-0 my-lg-4" },
        !this.isVariantSelected && this.renderModelSelection(),
        this.isModelSelected && this.renderVariantsList(),
        this.isVariantSelected && this.renderQuoteCalculation())));
  }
  static get is() { return "cars-calculator-app"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["cars-calculator-app.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["cars-calculator-app.css"]
  }; }
  static get properties() { return {
    "isPaidCampaign": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-paid-campaign",
      "reflect": false
    },
    "apiBaseUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "api-base-url",
      "reflect": false
    },
    "profileId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "profile-id",
      "reflect": false
    }
  }; }
  static get states() { return {
    "areStylesLoaded": {},
    "isModelSelected": {},
    "isVariantSelected": {},
    "isQuoteCalculated": {}
  }; }
}
