import { Component, h, Host, State } from '@stencil/core';
import { pipe } from 'fp-ts/function';
import * as O from 'fp-ts/Option';
import { toSelectInputOptionsArray } from '../../../utils';
import eventTrackingService from '../services/event-tracking.service';
import sessionQuery from '../services/session.query';
import sessionStore from '../services/session.store';
const generateTermsOptionsArray = (years) => [...Array(years).keys()]
  .map((n) => n + 1)
  .map((n) => ({
  label: `${n} Year${n > 1 ? 's' : ''}`,
  value: n
}));
export class PersonalInfoSection {
  constructor() {
    this.terms = generateTermsOptionsArray(5);
    this.states = ['ACT', 'NSW', 'NT', 'QLD', 'SA', 'TAS', 'VIC', 'WA'];
    this.paymentPeriods = ['Monthly', 'Fortnightly', 'Weekly'];
    this.employmentTypes = [
      'Full-time',
      'Part-time',
      'Casual',
      'Contractor',
      'Other'
    ];
    sessionQuery.user$.subscribe((state) => (this.userInfo = state));
  }
  render() {
    return (h(Host, { class: "d-flex flex-column align-items-start justify-content-between" },
      h("div", { class: "d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-center mt-2 h4" },
        h("span", { class: "pr-0 pr-sm-2 d-flex text-center" }, "My annual salary before tax is"),
        h("input", { placeholder: "50000", type: "text", class: "form-control d-flex w-auto mt-2 mt-lg-0", value: '$' + this.getUserInfo('annualSalary'), onInput: (e) => {
            const el = e.target;
            el.value = el.value.replace(/\D/g, '');
          }, onFocus: (e) => {
            const el = e.target;
            el.value = el.value.replace('$', '');
          }, onBlur: (e) => {
            const el = e.target;
            el.value = '$' + el.value;
          }, onChange: (e) => this.updateUserInfo('annualSalary', parseFloat(e.target.value.trim())) })),
      h("div", { class: "d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-center mt-4 h4" },
        h("span", { class: "pr-0 pr-sm-2 d-flex text-center" }, "I get paid"),
        h("fl-dropdown", { class: "d-flex my-2 my-lg-0", options: toSelectInputOptionsArray(this.paymentPeriods), requiredValidationMessage: "Select an option", placeholder: "Select...", value: this.getUserInfo('paymentPeriod'), onValueChanged: (e) => this.updateUserInfo('paymentPeriod', e.detail.value) })),
      h("div", { class: "d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-center mt-4 h4" },
        h("span", { class: "pr-0 pr-sm-2 d-flex text-center" }, "Every year I expect to drive"),
        h("input", { placeholder: "10000", type: "text", class: "form-control d-flex w-auto mt-2 mt-lg-0", value: this.getUserInfo('annualKms') + ' km', onInput: (e) => {
            const el = e.target;
            el.value = el.value.replace(/\D/g, '');
          }, onFocus: (e) => {
            const el = e.target;
            el.value = el.value.replace(' km', '');
          }, onBlur: (e) => {
            const el = e.target;
            el.value += ' km';
          }, onChange: (ev) => this.updateUserInfo('annualKms', parseInt(ev.target.value.trim())) })),
      h("div", { class: "d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-center mt-4 h4" },
        h("span", { class: "pr-0 pr-sm-2 d-flex text-center" }, "I live in"),
        h("fl-dropdown", { class: "d-flex my-2 my-lg-0", options: toSelectInputOptionsArray(this.states), requiredValidationMessage: "Select an option", placeholder: "select state", value: this.getUserInfo('state'), onValueChanged: (e) => this.updateUserInfo('state', e.detail.value) })),
      h("div", { class: "d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-center mt-4 h4" },
        h("span", { class: "pr-0 pr-sm-2 d-flex text-center" }, "I want my lease term to be"),
        h("fl-dropdown", { class: "d-flex my-2 my-lg-0", options: this.terms, requiredValidationMessage: "Select an option", placeholder: "Select...", value: this.getUserInfo('term'), onValueChanged: (e) => this.updateUserInfo('term', e.detail.value) })),
      h("div", { class: "d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-center mt-4 h4" },
        h("span", { class: "pr-0 pr-sm-2 d-flex text-center" }, "Employment Type"),
        h("fl-dropdown", { class: "d-flex my-2 my-lg-0", options: toSelectInputOptionsArray(this.employmentTypes), requiredValidationMessage: "Select an option", placeholder: "Select...", value: this.getUserInfo('employmentType'), onValueChanged: (e) => this.updateUserInfo('employmentType', e.detail.value) }))));
  }
  updateUserInfo(key, value) {
    sessionStore.update({ user: Object.assign(Object.assign({}, this.userInfo), { [key]: O.some(value) }) });
    eventTrackingService.trackInputChangedAsync({
      key: key,
      value: value.toString()
    });
  }
  getUserInfo(key) {
    return pipe(this.userInfo[key], O.getOrElseW(() => ''));
  }
  static get is() { return "ap-ben-personal-info-section"; }
  static get states() { return {
    "userInfo": {}
  }; }
}
