import { Component, h, Prop, State } from '@stencil/core';
import { pipe } from 'fp-ts/lib/pipeable';
import * as O from 'fp-ts/Option';
import produce from 'immer';
import { Subscription } from 'rxjs';
import { BenefitCategories } from '../../store/manage-benefits.store';
import editBenefitQuery from '../edit-benefit.query';
import editBenefitService from '../edit-benefit.service';
export class EditBenefitForm {
  constructor() {
    this.isValidationDisplayed = false;
    this.disabled = false;
    this.draftBenefit = O.none;
    this.stateSubscription = new Subscription();
    this.nonWhitespaceRegex = /.*\S+.*/;
  }
  componentWillLoad() {
    this.stateSubscription.add(editBenefitQuery.draftBenefit$.subscribe((draftBenefit) => (this.draftBenefit = draftBenefit)));
  }
  disconnectedCallback() {
    this.stateSubscription.unsubscribe();
  }
  render() {
    return (h("form", { class: "needs-validation", novalidate: "true", ref: (element) => (this.benefitForm = element) },
      h("fieldset", { disabled: this.disabled },
        h("div", { class: "row" },
          h("div", { class: "col-12 col-sm-4 mb-1" },
            h("span", { class: "d-block" }, "Icon")),
          h("div", { class: "col-12 col-sm-8" },
            h("ap-ben-upload-benefit-icon", null))),
        h("div", { class: "row my-4" },
          h("div", { class: "col-12 col-sm-4 mb-1" },
            h("span", null,
              "Title",
              h("abbr", { title: "Required", class: "text-danger text-decoration-none" }, "*"))),
          h("div", { class: `col-12 col-sm-8 ${this.isValidationDisplayed ? 'was-validated' : ''}` },
            h("input", { type: "text", name: "benefitTitle", value: pipe(this.draftBenefit, O.chain((b) => b.title), O.toUndefined), required: true, class: "uiid-benefit-title form-control fl-hide-valid-style", maxLength: 40, onInput: (event) => {
                const newValue = event.target.value;
                this.updateDraftBenefit((draft) => {
                  draft.title = O.fromNullable(newValue);
                });
              }, pattern: this.nonWhitespaceRegex.source }),
            h("span", { class: "invalid-feedback" }, "Please provide a name for your benefit."))),
        h("div", { class: "row my-4" },
          h("div", { class: "col-12 col-sm-4 mb-1" },
            h("span", null, "Subtitle")),
          h("div", { class: "col-12 col-sm-8" },
            h("input", { type: "text", name: "benefitValue", value: pipe(this.draftBenefit, O.chain((b) => b.subtitle), O.toUndefined), class: "uiid-benefit-highlight form-control fl-hide-valid-style", maxLength: 40, onInput: (event) => {
                const newValue = event.target.value;
                this.updateDraftBenefit((draft) => {
                  draft.subtitle = O.fromNullable(newValue);
                });
              } }),
            h("small", { class: "text-muted" }, "Highlight phone numbers, dates or potential savings"))),
        h("div", { class: "row my-4" },
          h("div", { class: "col-12 col-sm-4 mb-1" },
            h("span", null, "Description")),
          h("div", { class: "col-12 col-sm-8" },
            h("textarea", { name: "benefitDescription", value: pipe(this.draftBenefit, O.chain((b) => b.description), O.toUndefined), class: "uiid-benefit-description form-control fl-hide-valid-style", placeholder: "Join the team in the park for 30 minutes", maxLength: 400, rows: 4, onInput: (event) => {
                const newValue = event.target.value;
                this.updateDraftBenefit((draft) => {
                  draft.description = O.fromNullable(newValue);
                });
              } }))),
        h("div", { class: "row my-4" },
          h("div", { class: "col-12 col-sm-4 mb-1" },
            h("span", null,
              "Category",
              h("abbr", { title: "Required", class: "text-danger text-decoration-none" }, "*"))),
          h("div", { class: `col-12 col-sm-4 ${this.isValidationDisplayed ? 'was-validated' : ''}` },
            h("select", { name: "benefitCategory", class: "uiid-benefit-category form-control fl-hide-valid-style", required: true, onInput: (event) => {
                const newValue = event.target.value;
                this.updateDraftBenefit((draft) => {
                  draft.category = O.fromNullable(newValue);
                });
              } },
              h("option", { value: "", label: "Select...", selected: pipe(this.draftBenefit, O.chain((b) => b.category), O.isNone), disabled: true, hidden: true }),
              BenefitCategories.map((category) => (h("option", { value: category, selected: pipe(this.draftBenefit, O.chain((b) => b.category), O.toUndefined) === category }, category)))),
            h("span", { class: "invalid-feedback" }, "Please choose a category for your benefit."))),
        h("div", { class: "row mt-4" },
          h("div", { class: "col-12 col-sm-4 mb-1" }, "Additional information"),
          h("div", { class: "col-12 col-sm-8 mb-3" },
            h("ap-ben-benefit-url", null),
            h("ap-ben-upload-file", null))))));
  }
  updateDraftBenefit(producer) {
    if (O.isNone(this.draftBenefit))
      return;
    let updatedDraft = produce(this.draftBenefit.value, producer);
    updatedDraft = produce(updatedDraft, (draft) => {
      draft.isValid = this.benefitForm.checkValidity();
      draft.isDirty = true;
    });
    editBenefitService.updateDraftBenefit(updatedDraft);
  }
  static get is() { return "ap-ben-edit-benefit-form"; }
  static get properties() { return {
    "isValidationDisplayed": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-validation-displayed",
      "reflect": false,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "draftBenefit": {}
  }; }
}
