import { Component, getAssetPath, h, Host, State } from '@stencil/core';
import { format } from 'date-fns';
import * as O from 'fp-ts/Option';
import { getOrDefault } from '../../../utils';
import carsCalculatorService from '../services/cars-calculator.service';
import eventTrackingService from '../services/event-tracking.service';
import sessionQuery from '../services/session.query';
import viewService from '../services/view.service';
export class ModelVariantsSection {
  constructor() {
    this.variantsList = [];
    this.selectedVariant = O.none;
    this.placeholderImage = getAssetPath('./assets/car-placeholder.svg');
  }
  componentWillLoad() {
    sessionQuery.selectedVariant$.subscribe((state) => {
      this.selectedVariant = state;
    });
    sessionQuery.modelVariantsList$.subscribe((state) => {
      this.variantsList = getOrDefault(state, []);
    });
  }
  render() {
    return (h(Host, { class: "d-flex flex-column justify-content-start align-items-center abe-fade-in-bottom" }, O.isNone(this.selectedVariant) ? (this.variantsList.length > 0 ? (this.variantsList.map((variant) => this.variantCard(variant, false))) : (h("fl-loading-indicator", { class: "mt-5" }))) : (this.variantCard(this.selectedVariant.value, true))));
  }
  variantCard(variant, isSelected) {
    const imgSrc = getOrDefault(variant.photoUri, this.placeholderImage);
    const toVariantFuelType = (fuelTypeId) => {
      switch (fuelTypeId) {
        case 100029:
        case 100032:
          return 'Diesel';
        case 100035:
          return 'Electric';
        case 100030:
        case 100031:
          return 'LPG';
        case 100033:
        case 100034:
          return 'Petrol';
        default:
          return '';
      }
    };
    const toEngineDescription = (variant) => {
      return `${variant.engineLitres.toFixed(1)}L ${toVariantFuelType(variant.fuelTypeId)}`.trimEnd();
    };
    const toVariantDescription = (variant) => `${variant.description.toLowerCase().trimEnd()}, ${toEngineDescription(variant)}, ${variant.transmission.toLowerCase()}`;
    return (h("div", { class: "card d-flex w-100 flex-row justify-content-between align-items-center mt-3" },
      h("img", { class: "abe-car-icon mx-4 d-none d-md-flex", src: imgSrc, alt: "", onError: (e) => this.handleImgError(e) }),
      h("div", { class: "d-flex flex-column align-items-start flex-grow-1 px-3 py-2 p-md-0" },
        h("h5", { class: "card-title text-capitalize mb-0" }, toVariantDescription(variant)),
        h("p", { class: "card-text text-muted" },
          "Built from ",
          this.toMonthName(variant.modelMonth),
          " ",
          variant.buildYear)),
      isSelected ? (h("fl-button", { class: "ml-3 mr-4", variant: "secondary", onClick: () => this.resetVariant() },
        h("span", { class: "px-3" }, "Change"))) : (h("fl-button", { class: "ml-3 mr-4", onClick: () => this.chooseVariant(variant) },
        h("span", { class: "px-3" }, "Select")))));
  }
  toMonthName(monthNumber) {
    return format(new Date().setMonth(monthNumber), 'MMMM');
  }
  resetVariant() {
    carsCalculatorService.selectVariant(O.none);
    eventTrackingService.trackStepProgressedAsync({ stepName: 'variantSelection' });
  }
  chooseVariant(variant) {
    viewService.scrollToTop();
    carsCalculatorService.selectVariant(O.some(variant));
    eventTrackingService.trackStepProgressedAsync({ stepName: 'leaseInformation' });
    eventTrackingService.trackInputChangedAsync({
      key: 'variant',
      value: variant.description
    });
  }
  handleImgError(event) {
    event.target.src = this.placeholderImage;
  }
  static get is() { return "ap-ben-model-variants-section"; }
  static get originalStyleUrls() { return {
    "$": ["model-variants-section.component.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["model-variants-section.component.css"]
  }; }
  static get assetsDirs() { return ["assets"]; }
  static get states() { return {
    "variantsList": {},
    "selectedVariant": {}
  }; }
}
