import { Component, Event, h, Prop, State, Watch } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import apiFetch from '../../../../functions/fetch';
export class ScCancelSurvey {
  componentWillLoad() {
    if (!this.reasons) {
      this.fetchReasons();
    }
  }
  handleSelectedReasonChange() {
    var _a;
    if ((_a = this.selectedReason) === null || _a === void 0 ? void 0 : _a.comment_enabled) {
      setTimeout(() => {
        this.textArea.triggerFocus();
      }, 50);
    }
  }
  async fetchReasons() {
    try {
      this.loading = true;
      this.reasons = await apiFetch({
        path: 'surecart/v1/cancellation_reasons',
      });
    }
    catch (e) {
      console.error(e);
      this.error = e;
    }
    finally {
      this.loading = false;
    }
  }
  async handleSubmit(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    try {
      this.scSubmitReason.emit({ reason: this.selectedReason, comment: this.comment });
    }
    catch (e) {
      console.error(e);
      this.error = e;
    }
  }
  renderReasons() {
    if (this.loading) {
      return (h("sc-choice", null,
        h("sc-skeleton", null)));
    }
    return (this.reasons || []).map(reason => (h("sc-choice", { value: reason === null || reason === void 0 ? void 0 : reason.id, name: "reason", onScChange: e => {
        if (e.target.checked) {
          this.selectedReason = reason;
        }
      } }, reason === null || reason === void 0 ? void 0 : reason.label)));
  }
  render() {
    var _a, _b, _c;
    const { reasons_title, reasons_description, skip_link } = ((_a = this.protocol) === null || _a === void 0 ? void 0 : _a.preservation_locales) || {};
    if (this.loading) {
      return h("sc-skeleton", null);
    }
    return (h("div", { class: "cancel-survey" },
      h("sc-dashboard-module", { heading: reasons_title, style: { '--sc-dashboard-module-spacing': '2em' } },
        h("span", { slot: "description" }, reasons_description),
        h("sc-form", { onScSubmit: e => this.handleSubmit(e), style: { '--sc-form-row-spacing': '2em' } },
          h("sc-choices", { showLabel: false, label: __('Choose a reason', 'surecart'), style: { '--columns': '2' }, required: true }, this.renderReasons()),
          ((_b = this.selectedReason) === null || _b === void 0 ? void 0 : _b.comment_enabled) && (h("sc-textarea", { label: ((_c = this.selectedReason) === null || _c === void 0 ? void 0 : _c.comment_prompt) || __('Additional Comments', 'surecart'), required: true, ref: el => (this.textArea = el), onScInput: e => (this.comment = e.target.value) })),
          h("sc-flex", { justifyContent: "flex-start" },
            h("sc-button", { type: "primary", submit: true },
              __('Continue', 'surecart'),
              h("sc-icon", { name: "arrow-right", slot: "suffix" })),
            !!skip_link && (h("sc-button", { class: "cancel-survey__abort-link", type: "text", onClick: () => this.scAbandon.emit() }, skip_link)))))));
  }
  static get is() { return "sc-cancel-survey"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-cancel-survey.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-cancel-survey.css"]
  }; }
  static get properties() { return {
    "protocol": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SubscriptionProtocol",
        "resolved": "SubscriptionProtocol",
        "references": {
          "SubscriptionProtocol": {
            "location": "import",
            "path": "../../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "reasons": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "CancellationReason[]",
        "resolved": "CancellationReason[]",
        "references": {
          "CancellationReason": {
            "location": "import",
            "path": "../../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "loading": {},
    "selectedReason": {},
    "comment": {},
    "error": {}
  }; }
  static get events() { return [{
      "method": "scAbandon",
      "name": "scAbandon",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "scSubmitReason",
      "name": "scSubmitReason",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ reason: CancellationReason; comment: string }",
        "resolved": "{ reason: CancellationReason; comment: string; }",
        "references": {
          "CancellationReason": {
            "location": "import",
            "path": "../../../../types"
          }
        }
      }
    }]; }
  static get watchers() { return [{
      "propName": "selectedReason",
      "methodName": "handleSelectedReasonChange"
    }]; }
}
