import { h } from "@stencil/core";
import { intl } from "../../../../global/global";
import { createStyleSheet } from "../../../../styling/JSS";
import { vatLabels } from "../../countries";
import { INDIRECT_TAX_PROVINCES } from "../../subregions";
import { formatErrorMessage } from "../../utils";
const style = {
  Container: {
    width: "100%",
  },
  InputContainer: {
    width: "100%",
    display: "flex",
    justifyContent: "flex-start",
    flexDirection: "column",
    gap: "16px",
    padding: "16px",
    maxWidth: "450px",
  },
  ConditionalInputsContainer: {
    width: "100%",
    display: "flex",
    justifyContent: "flex-start",
    flexDirection: "column",
    gap: "16px",
  },
  HR: {
    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
    margin: "10px 0",
  },
  Input: { maxWidth: "500px" },
  Checkbox: {
    "&::part(control)": {
      borderRadius: "0 !important",
    },
  },
  SearchInput: {
    padding: "var(--sl-spacing-x-small)",
  },
  ErrorInput: {
    maxWidth: "500px",
    "&::part(base)": {
      border: "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)",
      borderRadius: "var(--sl-input-border-radius-medium)",
    },
    "&::part(help-text)": {
      color: "var(--sqm-danger-color-text)",
    },
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const vanillaStyle = `
    :host{
      display: block;   
    }
    * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
    }
    sl-menu-item::part(base) {
      color: var(--sqm-input-color);
    }

    sl-menu-item::part(base):hover {
      background-color: var(--sqm-input-border-color-hover);
    }
    sl-checkbox[checked]::part(control){
      background-color: var(--sqm-input-border-color-focus);
    }

    sl-checkbox[checked]::part(checked-icon){
      color: var(--sqm-input-background);
    }
  `;
export const OtherRegionSlotView = (props) => {
  var _a, _b, _c;
  const { states, states: { formState }, callbacks, text, } = props;
  const { classes } = sheet;
  const getTaxFieldLabel = (taxType) => {
    return intl.formatMessage({
      id: `tax-field-label${taxType}`,
      defaultMessage: text.indirectTaxNumber,
    }, { taxType });
  };
  const getTaxFieldError = (taxType) => {
    return intl.formatMessage({
      id: `tax-field-label${taxType}`,
      defaultMessage: text.error.indirectTaxNumber,
    }, { taxType });
  };
  const IndirectTaxNumberInput = ({ label, error, name, }) => {
    var _a;
    return (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: label, disabled: states.loading || states.disabled, value: formState[name] }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a[name]) && {
      class: classes.ErrorInput,
      helpText: error,
    }), { id: name, name: `/${name}` })));
  };
  const SpainFields = () => {
    var _a, _b;
    return (h("div", { class: classes.ConditionalInputsContainer },
      h("sl-select", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, value: formState.subRegion, label: text.subRegion, disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
        class: classes.ErrorInput,
        helpText: formatErrorMessage(text.subRegion, text.error.fieldRequiredError),
      }), { id: "subRegion", name: "/subRegion" }), props.data.esRegions.map((r) => (h("sl-menu-item", { value: r.regionCode }, r.displayName)))),
      h(IndirectTaxNumberInput, { name: "indirectTaxNumber", label: getTaxFieldLabel("VAT"), error: getTaxFieldError("VAT") }),
      h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", checked: formState.hasSubRegionTaxNumber, "onSl-change": callbacks.onSpainToggle, disabled: states.disabled || states.isPartner }, text.isRegisteredSubRegionIncomeTax),
      formState.hasSubRegionTaxNumber && (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.subRegionTaxNumberLabel, disabled: states.loading || states.disabled, value: formState.subRegionTaxNumber }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.subRegionTaxNumber) && {
        class: classes.ErrorInput,
        helpText: formatErrorMessage(text.subRegionTaxNumberLabel, text.error.fieldRequiredError),
      }), { id: "subRegionTaxNumber", name: "/subRegionTaxNumber" })))));
  };
  const CanadaFields = () => {
    var _a, _b;
    const { classes } = sheet;
    const currentTaxType = (_a = INDIRECT_TAX_PROVINCES === null || INDIRECT_TAX_PROVINCES === void 0 ? void 0 : INDIRECT_TAX_PROVINCES.find((p) => p.regionCode === formState.province)) === null || _a === void 0 ? void 0 : _a.taxType;
    return (h("div", { class: classes.ConditionalInputsContainer },
      h("sl-select", Object.assign({ required: true, value: formState.province, exportparts: "label: input-label, base: input-base", class: classes.Input, label: text.province, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("province", e) }, (((_b = formState.errors) === null || _b === void 0 ? void 0 : _b.province) && {
        class: classes.ErrorInput,
        helpText: formatErrorMessage(text.province, text.error.fieldRequiredError),
      }), { id: "province", name: "/province" }), props.data.provinces.map((p) => (h("sl-menu-item", { value: p.regionCode }, p.displayName)))),
      currentTaxType === "GST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("GST"), error: getTaxFieldError("GST"), name: "indirectTaxNumber" })),
      currentTaxType === "HST" && (h(IndirectTaxNumberInput, { label: getTaxFieldLabel("HST"), error: getTaxFieldError("HST"), name: "indirectTaxNumber" })),
      formState.province === "QUEBEC" && (h("div", { class: classes.ConditionalInputsContainer },
        h("sl-checkbox", { class: classes.Checkbox, exportparts: "label: input-label, base: input-base", "onSl-change": callbacks.onQstToggle, checked: formState.hasQst, disabled: states.isPartner || states.disabled }, text.isRegisteredQST),
        formState.hasQst && (h(IndirectTaxNumberInput, { name: "qstNumber", label: text.qstNumber, error: formatErrorMessage(text.qstNumber, text.error.fieldRequiredError) }))))));
  };
  const getActiveForm = (selectedRegion) => {
    var _a;
    switch (selectedRegion) {
      case "CA":
        return h(CanadaFields, null);
      case "ES":
        return h(SpainFields, null);
      default:
        return (h("sl-input", Object.assign({ required: true, exportparts: "label: input-label, base: input-base", class: classes.Input, value: formState.indirectTaxNumber, label: getTaxFieldLabel(vatLabels[selectedRegion] || "GENERAL"), disabled: states.loading || states.disabled }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.indirectTaxNumber) && {
          class: classes.ErrorInput,
          helpText: getTaxFieldError(vatLabels[selectedRegion] || "GENERAL"),
        }), { id: "indirectTaxNumber", name: "/indirectTaxNumber" })));
    }
  };
  const activeForm = getActiveForm(formState.selectedRegion);
  return (h("div", { style: states.hide ? { display: "none" } : {} },
    h("form", { class: classes.Container },
      h("style", { type: "text/css" },
        styleString,
        vanillaStyle),
      h("hr", { class: classes.HR }),
      h("div", { class: classes.InputContainer },
        h("sl-select", Object.assign({ required: true, class: classes.Input, value: formState.selectedRegion, exportparts: "label: input-label, base: input-base", label: text.selectedRegion, disabled: states.loading || states.disabled, "onSl-select": (e) => callbacks.onFormChange("selectedRegion", e) }, (((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.selectedRegion) && {
          class: classes.ErrorInput,
          helpText: formatErrorMessage(text.selectedRegion, text.error.fieldRequiredError),
        }), { id: "selectedRegion", name: "/selectedRegion" }),
          h("sl-input", { class: classes.SearchInput, placeholder: text.searchForCountryText, onKeyDown: (e) => {
              // Stop shoelace intercepting key presses
              e.stopPropagation();
            }, "onSl-input": (e) => {
              callbacks.setCountrySearch(e.target.value);
            } }), (_b = props.data.countries) === null || _b === void 0 ? void 0 :
          _b.map((c) => (h("sl-menu-item", { value: c.countryCode }, c.displayName))), (_c = props.data.allCountries) === null || _c === void 0 ? void 0 :
          _c.map((c) => (h("sl-menu-item", { value: c.countryCode, style: { display: "none" } }, c.displayName)))),
        activeForm),
      h("hr", { class: classes.HR }))));
};
