import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../../utils/utils";
import { TAX_CONTEXT_NAMESPACE } from "../data";
import { UserInfoFormView } from "./sqm-user-info-form-view";
import { useUserInfoForm } from "./useUserInfoForm";
/**
 * @uiName User Information Form
 * @exampleGroup Tax and Cash Components
 */
export class TaxForm {
  constructor() {
    this.ignored = true;
    /**
     * @uiName First name field label
     */
    this.firstName = "First name";
    /**
     * @uiName Last name field label
     */
    this.lastName = "Last name";
    /**
     * @uiName Email field label
     */
    this.email = "Email";
    /**
     * @uiName Country field label
     */
    this.country = "Country";
    /**
     * @uiName Phone number field label
     */
    this.phoneNumber = "Phone number";
    /**
     * @uiName Address field label
     */
    this.address = "Address";
    /**
     * @uiName City field label
     */
    this.city = "City";
    /**
     * @uiName State field label
     */
    this.state = "State";
    /**
     * @uiName State field label
     */
    this.province = "Province";
    /**
     * @uiName State field label
     */
    this.region = "Region";
    /**
     * @uiName Postal code field label
     */
    this.postalCode = "Postal code";
    /**
     * @uiName Currency field label
     */
    this.currency = "Currency";
    /**
     * @uiName Currency field help text
     */
    this.currencyHelpText = "Choose your preferred payout currency";
    /**
     * @uiName Setup progress
     */
    this.formStep = "Step {step} of {count}";
    /**
     * @uiName Step 1 title
     */
    this.personalInformation = "Personal Information";
    /**
     * @uiName Continue button label
     */
    this.continueButton = "Continue";
    /**
     * Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com.
     * @uiName Participant is a partner alert title
     * @uiWidget textArea
     */
    this.isPartnerAlertHeader = "An account with this email already exists with our referral program provider, impact.com";
    /**
     * Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com.
     * @uiName Participant is a partner alert description
     * @uiWidget textArea
     */
    this.isPartnerAlertDescription = "If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.";
    /**
     * Part of the alert displayed at the top of the page.
     * @uiName Form submission error message title
     * @uiWidget textArea
     */
    this.generalErrorTitle = "There was a problem submitting your information";
    /**
     * Part of the alert displayed at the top of the page.
     * @uiName Form submission error message description
     * @uiWidget textArea
     */
    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
    /**
     * Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}.
     * @uiName Terms and conditions checkbox
     */
    this.allowBankingCollection = "I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information";
    /**
     * The link text that appears in the terms and conditions checkbox
     * @uiName Terms and conditions text
     * @uiWidget textArea
     */
    this.termsAndConditionsLabel = "terms and conditions";
    /**
     * The link that appears in the terms and conditions checkbox
     * @uiName Terms and conditions link
     */
    this.termsAndConditionsLink = "https://terms.advocate.impact.com/PayoutTermsAndConditions.html";
    /**
     * Placeholder text displayed in the country search dropdown
     * @uiName Country field placeholder text
     */
    this.searchForCountryText = "Search for country..";
    /**
     * Placeholder text displayed in the currency search dropdown
     * @uiName Currency field placeholder text
     */
    this.searchForCurrencyText = "Search for currency..";
    /**
     * Displayed under a field that is missing required information.
     * @uiName Empty form field error message
     */
    this.fieldRequiredError = "{fieldName} is required";
    /**
     * Displayed under a field when it has an invalid entry.
     * @uiName Form field error message
     */
    this.fieldInvalidError = "{fieldName} is invalid";
    /**
     * Displayed under Address or City fields that includes invalid characters (non-ASCII).
     * @uiName Invalid character error message
     */
    this.invalidCharacterError = "{fieldName} includes characters that aren't supported.";
    /**
     * Part of the alert displayed at the top of the page.
     * @uiName Page load error message title
     * @uiWidget textArea
     */
    this.loadingErrorAlertHeader = "There was a problem loading your form";
    /**
     * Part of the alert displayed at the top of the page.
     * @uiName Page load error message description
     * @uiWidget textArea
     */
    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
    /**
     * Displayed at the top of the page on all set up steps.
     * @uiName Page description
     */
    this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
    /**
     * @uiName Support link text
     */
    this.supportLink = "support team";
    withHooks(this);
  }
  disconnectedCallback() { }
  getTextProps() {
    const props = getProps(this);
    return {
      ...props,
      error: {
        fieldRequiredError: props.fieldRequiredError,
        fieldInvalidError: props.fieldInvalidError,
        generalTitle: props.generalErrorTitle,
        generalDescription: props.generalErrorDescription,
        loadingErrorAlertHeader: props.loadingErrorAlertHeader,
        loadingErrorAlertDescription: props.loadingErrorAlertDescription,
        invalidCharacterError: props.invalidCharacterError,
      },
    };
  }
  render() {
    const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this);
    return (h(UserInfoFormView, { data: props.data, states: props.states, callbacks: {
        ...props.callbacks,
        onSubmit: props.onSubmit,
      }, text: props.text, refs: props.refs }));
  }
  static get is() { return "sqm-user-info-form"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "firstName": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "First name field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "first-name",
      "reflect": false,
      "defaultValue": "\"First name\""
    },
    "lastName": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Last name field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "last-name",
      "reflect": false,
      "defaultValue": "\"Last name\""
    },
    "email": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Email field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "email",
      "reflect": false,
      "defaultValue": "\"Email\""
    },
    "country": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Country field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "country",
      "reflect": false,
      "defaultValue": "\"Country\""
    },
    "phoneNumber": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Phone number field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "phone-number",
      "reflect": false,
      "defaultValue": "\"Phone number\""
    },
    "address": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Address field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "address",
      "reflect": false,
      "defaultValue": "\"Address\""
    },
    "city": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "City field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "city",
      "reflect": false,
      "defaultValue": "\"City\""
    },
    "state": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "State field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "state",
      "reflect": false,
      "defaultValue": "\"State\""
    },
    "province": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "State field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "province",
      "reflect": false,
      "defaultValue": "\"Province\""
    },
    "region": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "State field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "region",
      "reflect": false,
      "defaultValue": "\"Region\""
    },
    "postalCode": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Postal code field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "postal-code",
      "reflect": false,
      "defaultValue": "\"Postal code\""
    },
    "currency": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Currency field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "currency",
      "reflect": false,
      "defaultValue": "\"Currency\""
    },
    "currencyHelpText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Currency field help text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "currency-help-text",
      "reflect": false,
      "defaultValue": "\"Choose your preferred payout currency\""
    },
    "formStep": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Setup progress",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "form-step",
      "reflect": false,
      "defaultValue": "\"Step {step} of {count}\""
    },
    "personalInformation": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Step 1 title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "personal-information",
      "reflect": false,
      "defaultValue": "\"Personal Information\""
    },
    "continueButton": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Continue button label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "continue-button",
      "reflect": false,
      "defaultValue": "\"Continue\""
    },
    "isPartnerAlertHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Participant is a partner alert title",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com."
      },
      "attribute": "is-partner-alert-header",
      "reflect": false,
      "defaultValue": "\"An account with this email already exists with our referral program provider, impact.com\""
    },
    "isPartnerAlertDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Participant is a partner alert description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com."
      },
      "attribute": "is-partner-alert-description",
      "reflect": false,
      "defaultValue": "\"If you don\u2019t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email.\""
    },
    "generalErrorTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form submission error message title",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page."
      },
      "attribute": "general-error-title",
      "reflect": false,
      "defaultValue": "\"There was a problem submitting your information\""
    },
    "generalErrorDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form submission error message description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page."
      },
      "attribute": "general-error-description",
      "reflect": false,
      "defaultValue": "\"Please review your information and try again. If this problem continues, contact our {supportLink}.\""
    },
    "allowBankingCollection": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Terms and conditions checkbox",
            "name": "uiName"
          }],
        "text": "Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}."
      },
      "attribute": "allow-banking-collection",
      "reflect": false,
      "defaultValue": "\"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information\""
    },
    "termsAndConditionsLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Terms and conditions text",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "The link text that appears in the terms and conditions checkbox"
      },
      "attribute": "terms-and-conditions-label",
      "reflect": false,
      "defaultValue": "\"terms and conditions\""
    },
    "termsAndConditionsLink": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Terms and conditions link",
            "name": "uiName"
          }],
        "text": "The link that appears in the terms and conditions checkbox"
      },
      "attribute": "terms-and-conditions-link",
      "reflect": false,
      "defaultValue": "\"https://terms.advocate.impact.com/PayoutTermsAndConditions.html\""
    },
    "searchForCountryText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Country field placeholder text",
            "name": "uiName"
          }],
        "text": "Placeholder text displayed in the country search dropdown"
      },
      "attribute": "search-for-country-text",
      "reflect": false,
      "defaultValue": "\"Search for country..\""
    },
    "searchForCurrencyText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Currency field placeholder text",
            "name": "uiName"
          }],
        "text": "Placeholder text displayed in the currency search dropdown"
      },
      "attribute": "search-for-currency-text",
      "reflect": false,
      "defaultValue": "\"Search for currency..\""
    },
    "fieldRequiredError": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Empty form field error message",
            "name": "uiName"
          }],
        "text": "Displayed under a field that is missing required information."
      },
      "attribute": "field-required-error",
      "reflect": false,
      "defaultValue": "\"{fieldName} is required\""
    },
    "fieldInvalidError": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form field error message",
            "name": "uiName"
          }],
        "text": "Displayed under a field when it has an invalid entry."
      },
      "attribute": "field-invalid-error",
      "reflect": false,
      "defaultValue": "\"{fieldName} is invalid\""
    },
    "invalidCharacterError": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Invalid character error message",
            "name": "uiName"
          }],
        "text": "Displayed under Address or City fields that includes invalid characters (non-ASCII)."
      },
      "attribute": "invalid-character-error",
      "reflect": false,
      "defaultValue": "\"{fieldName} includes characters that aren't supported.\""
    },
    "loadingErrorAlertHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Page load error message title",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page."
      },
      "attribute": "loading-error-alert-header",
      "reflect": false,
      "defaultValue": "\"There was a problem loading your form\""
    },
    "loadingErrorAlertDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Page load error message description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page."
      },
      "attribute": "loading-error-alert-description",
      "reflect": false,
      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact our {supportLink}.\""
    },
    "taxAndPayoutsDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Page description",
            "name": "uiName"
          }],
        "text": "Displayed at the top of the page on all set up steps."
      },
      "attribute": "tax-and-payouts-description",
      "reflect": false,
      "defaultValue": "\"Submit your tax documents and add your banking information to receive your rewards.\""
    },
    "supportLink": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Support link text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "support-link",
      "reflect": false,
      "defaultValue": "\"support team\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<UseUserInfoFormResult>",
        "resolved": "{ states?: { step: string; hideState: boolean; hideSteps: boolean; disabled: boolean; loadingError: boolean; loading: boolean; isPartner: boolean; isUser: boolean; formState: { errors: {}; firstName: string; lastName: string; email: string; phoneNumberCountryCode: string; phoneNumber: string; countryCode: string; currency: string; address: string; city: string; state: string; postalCode: string; }; }; refs?: { formRef: Ref<HTMLFormElement>; currencyRef: Ref<HTMLSelectElement>; phoneCountryRef: Ref<HTMLSelectElement>; }; data?: { currencies: { displayName: string; currencyCode: string; }[]; countries: TaxCountry[]; phoneCountries: TaxCountry[]; allCurrencies: { displayName: string; currencyCode: string; }[]; allCountries: TaxCountry[]; regionLabelEnum: \"STATE\" | \"PROVINCE\" | \"REGION\"; regions: { label: string; value: string; }[]; partnerData: ImpactPublisher; userData: ImpactUser; }; setStep?: (value: string) => void; onSubmit?: (event: any) => Promise<void>; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../../global/demo"
          },
          "UseUserInfoFormResult": {
            "location": "import",
            "path": "./useUserInfoForm"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useDemoUserInfoForm(props) {
  const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
  return deepmerge({
    setStep,
    onSubmit: async () => {
      setStep("/2");
    },
    onRadioClick: () => { },
    text: props.getTextProps(),
    refs: {
      formRef: { current: null },
      currencyRef: { current: null },
      phoneCountryRef: { current: null },
    },
    data: {
      currencies: [{ currencyCode: "CAD", displayName: "CAD" }],
      allCurrencies: [{ currencyCode: "CAD", displayName: "CAD" }],
      countries: [{ countryCode: "CA", displayName: "Canada" }],
      phoneCountries: [{ countryCode: "CA", displayName: "Canada" }],
      allCountries: [{ countryCode: "CA", displayName: "Canada" }],
    },
    callbacks: {
      setCurrencySearch: (c) => console.log(c),
      setCountrySearch: (c) => console.log(c),
      setPhoneCountrySearch: (c) => console.log(c),
      onFormChange: () => { },
    },
    states: {
      step: "1",
      disabled: false,
      loading: false,
      isPartner: false,
      isUser: false,
      loadingError: false,
      formState: {
        errors: {
          email: false,
          firstName: false,
          lastName: false,
          countryCode: false,
          currency: false,
        },
      },
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
