import { Component, h, Host, State } from '@stencil/core';
import * as O from 'fp-ts/Option';
import benefitsService from '../../services/benefits.service';
import benefitsEventTrackingService from '../../services/event-tracking.service';
export class BenefitsPage {
  constructor() {
    this.shopifyUrl = O.none;
    this.urlRefreshHandle = O.none;
  }
  async componentWillLoad() {
    this.state = await benefitsService.getViewPageState();
  }
  async componentDidLoad() {
    this.shopifyUrl = await benefitsService.getShopifyUrl();
    this.setupShopifyUrlRefresh();
    await benefitsEventTrackingService.trackPageViewedAsync({ pageId: 'viewBenefits' });
  }
  disconnectedCallback() {
    if (O.isSome(this.urlRefreshHandle)) {
      window.clearInterval(this.urlRefreshHandle.value);
    }
  }
  render() {
    return (h(Host, { class: "w-100 mb-4" },
      h("ap-ben-ui-container", { class: "mt-4 d-none" },
        h("div", { class: "row" },
          h("div", { class: "col-12" },
            h("ap-ben-hero-banner", { shopifyUrl: this.shopifyUrl }))),
        h("div", { class: "row" },
          h("div", { class: "col-12" },
            h("ap-ben-promoted-benefits", { benefits: this.state.promotedBenefits }))),
        h("div", { class: "row" },
          h("div", { class: "col-12" },
            h("ap-ben-benefits-list", { benefits: this.state.availableBenefits }))))));
  }
  setupShopifyUrlRefresh() {
    const twoMinutesInMilliseconds = 2 * 60 * 1000;
    this.urlRefreshHandle = O.some(window.setInterval(async () => {
      this.shopifyUrl = await benefitsService.getShopifyUrl();
    }, twoMinutesInMilliseconds));
  }
  static get is() { return "ap-ben-benefits-page"; }
  static get states() { return {
    "state": {},
    "shopifyUrl": {}
  }; }
}
