import { Component, Event, h, State } from '@stencil/core';
import * as O from 'fp-ts/Option';
import backendApi from '../api/cars-calculator.api';
import carsCalculatorService from '../services/cars-calculator.service';
import eventTrackingService from '../services/event-tracking.service';
import sessionQuery from '../services/session.query';
import sessionStore from '../services/session.store';
// From https://emailregex.com/
// eslint-disable-next-line no-control-regex
const emailRegex = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
export class SubmitQuoteSection {
  constructor() {
    sessionQuery.userDetails$.subscribe((state) => (this.userDetails = state));
  }
  render() {
    return (h("div", { class: "container p-0 text-left" },
      h("form", { noValidate: true, class: {
          'was-validated': this.formState === 'validated'
        }, ref: (el) => (this.formElement = el) },
        h("div", { class: "row" },
          h("div", { class: "col" },
            h("h3", null, "Enquire now"))),
        h("div", { class: "row" },
          h("div", { class: "col" },
            h("p", null, "Enter your details below and we will get in touch."))),
        h("div", { class: "row mt-3" },
          this.inputField('userFirstName', 'First Name'),
          this.inputField('userLastName', 'Last Name')),
        h("div", { class: "row mt-3" }, this.inputField('emailAddress', 'Email', emailRegex)),
        h("div", { class: "row mt-3" },
          this.inputField('contactNumber', 'Mobile Number', /\+?[\d\s]{5,}/),
          this.inputField('employerName', 'Employer Name'))),
      h("div", { class: "row mt-4" },
        h("div", { class: "col" },
          h("fl-promise-button", { class: "font-weight-bold float-right", promiseFn: () => this.handleSubmitAsync() },
            h("span", { class: "px-4" }, "Submit")))),
      h("div", { class: "row mt-4" },
        h("div", { class: "col" },
          h("div", { class: "bg-light py-2 px-3" },
            h("p", { class: "small mb-0" },
              "By providing your contact details, you consent to Flare collecting and using your personal details as outlined in the",
              ' ',
              h("a", { target: "_blank", href: "https://www.flarehr.com/privacy-policy/", onClick: () => eventTrackingService.trackPrivacyPolicyViewedAsync() }, "privacy policy"),
              "."))))));
  }
  inputField(stateKey, placeholder, pattern) {
    return (h("div", { class: "col" },
      h("input", { placeholder: placeholder, type: "text", class: "form-control", minlength: "2", pattern: pattern === null || pattern === void 0 ? void 0 : pattern.source, required: true, onChange: (e) => {
          this.updateUserDetail(stateKey, e.target.value.trim());
        } }),
      h("div", { class: "invalid-feedback" }, "A valid value is required")));
  }
  updateUserDetail(key, value) {
    sessionStore.update({ userDetails: Object.assign(Object.assign({}, this.userDetails), { [key]: O.some(value) }) });
  }
  async handleSubmitAsync() {
    var _a;
    this.formState = 'validated';
    if (this.formElement.checkValidity()) {
      const enquiryRequest = carsCalculatorService.generateCarsEnquiryRequest();
      await backendApi.postQuoteInfoAsync(enquiryRequest);
      (_a = this.enquirySubmitted) === null || _a === void 0 ? void 0 : _a.emit();
      eventTrackingService.trackFormSubmittedAsync(enquiryRequest.websiteQuote);
    }
  }
  static get is() { return "ap-ben-submit-quote-section"; }
  static get states() { return {
    "userDetails": {},
    "formState": {}
  }; }
  static get events() { return [{
      "method": "enquirySubmitted",
      "name": "enquirySubmitted",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
}
