import { h } from "@stencil/core";
import { intl } from "../../../global/global";
import { createStyleSheet } from "../../../styling/JSS";
import { FORM_STEPS } from "../data";
const style = {
  FormWrapper: {
    display: "flex",
    justifyContent: "flex-start",
    flexDirection: "column",
  },
  RadioContainer: {
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    flexDirection: "column",
    gap: "var(--sl-spacing-medium)",
    marginBottom: "16px",
    "& sl-radio::part(base)": {
      alignItems: "start",
    },
  },
  InnerRadioContainer: {
    display: "flex",
    flexDirection: "column",
    gap: "var(--sl-spacing-medium)",
    width: "100%",
  },
  RadioContent: {
    display: "flex",
    flexDirection: "column",
    gap: "var(--sl-spacing-xx-small)",
    fontSize: "var(--sl-font-size-small)",
    color: "var(--sqm-text)",
  },
  TitleContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    gap: "var(--sl-spacing-small)",
  },
  TextContainer: {
    display: "flex",
    justifyContent: "flex-start",
    flexDirection: "column",
    gap: "24px",
    paddingBottom: "16px",
  },
  BtnContainer: {
    paddingTop: "36px",
    display: "flex",
    gap: "8px",
  },
  ErrorText: {
    color: "var(--sqm-danger-color-text)",
    marginTop: "10px",
  },
  DescriptionText: {
    color: "var(--sqm-text-subdued)",
  },
  InfoWarningIcon: {
    height: "26px",
    width: "26px",
  },
  PageDescriptionText: {
    color: "var(--sqm-text-subdued)",
    fontSize: "var(--sl-font-size-medium)",
    marginBottom: "var(--sl-spacing-small)",
  },
  PrimaryButton: {
    "&::part(base)": {
      background: "var(--sqm-primary-button-background)",
      color: "var(--sqm-primary-button-color)",
      borderColor: "var(--sqm-primary-button-color-border)",
      borderRadius: "var(--sqm-primary-button-radius)",
    },
    "&::part(base):hover": {
      backgroundColor: "var(--sqm-primary-button-background-hover)",
      borderColor: "var(--sqm-primary-button-border-color-hover)",
      color: "var(--sqm-primary-button-color-hover)",
    },
  },
  SecondaryButton: {
    "&::part(base)": {
      background: "var(--sqm-secondary-button-background)",
      color: "var(--sqm-secondary-button-color)",
      borderColor: "var(--sqm-secondary-button-color-border)",
      borderRadius: "var(--sqm-secondary-button-radius)",
      width: "max-content",
      display: "flex",
      margin: "auto",
    },
    "&::part(base):hover": {
      backgroundColor: "var(--sqm-secondary-button-background-hover)",
      color: "var(--sqm-secondary-button-color-hover)",
      borderColor: "var(--sqm-secondary-button-border-color-hover)",
    },
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const vanillaStyle = `
    :host{
      display: block;   
    }

    hr {
      border: var(--sqm-border-thickness, 1px) solid var(--sqm-border-color);
    }

    a {
      color: inherit;
      text-decoration: underline;
      cursor: pointer;
    }

    * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
    }

  `;
export const IndirectTaxFormView = (props) => {
  var _a;
  const { states, states: { formState }, callbacks, text, refs, slots, } = props;
  const { classes } = sheet;
  return (h("sl-form", { class: classes.FormWrapper, "onSl-submit": callbacks.onSubmit, ref: (el) => (refs.formRef.current = el), novalidate: true },
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("div", { class: classes.TextContainer },
      h("div", null,
        !states.hideSteps && (h("p", null,
          " ",
          intl.formatMessage({
            id: "formStep",
            defaultMessage: text.formStep,
          }, { step: states.step, count: FORM_STEPS }))),
        h("h3", null, text.indirectTax),
        h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription),
        h("p", { class: classes.DescriptionText }, text.indirectTaxDescription)),
      states.loadingError && (h("div", null,
        h("sqm-form-message", { type: "error" },
          h("p", { part: "alert-title" }, text.error.loadingErrorAlertHeader),
          intl.formatMessage({
            id: "loadingErrorAlertDescription",
            defaultMessage: text.error.loadingErrorAlertDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
          })))),
      ((_a = formState.errors) === null || _a === void 0 ? void 0 : _a.general) && (h("sqm-form-message", { type: "error" },
        h("p", { part: "alert-title" }, text.error.generalTitle),
        intl.formatMessage({
          id: "generalDescription",
          defaultMessage: text.error.generalDescription,
        }, {
          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
        }))),
      states.isPartner && (h("sqm-form-message", { loading: states.loading, type: "info" },
        h("p", { part: "alert-title" }, text.isPartnerAlertHeader),
        intl.formatMessage({
          id: "isPartnerAlertDescription",
          defaultMessage: text.isPartnerAlertDescription,
        }, {
          supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
        }))),
      h("div", null,
        h("h4", null, text.indirectTaxDetails))),
    states.loading ? (h("sl-spinner", { style: { fontSize: "50px", margin: "40px" } })) : (h("div", null,
      h("div", { class: classes.RadioContainer },
        h("div", { class: classes.InnerRadioContainer },
          h("sl-radio", { exportparts: "base: radio-base", name: "/checked", value: "notRegistered", id: "notRegistered", checked: formState.checked === "notRegistered", onInput: () => callbacks.onChange("notRegistered"), disabled: states.disabled || states.isPartner },
            h("div", { class: classes.RadioContent },
              text.notRegistered,
              h("p", { class: classes.DescriptionText }, text.notRegisteredSubtext))),
          h("sl-radio", { exportparts: "base: radio-base", name: "/checked", value: "otherRegion", id: "otherRegion", checked: formState.checked === "otherRegion", onInput: () => callbacks.onChange("otherRegion"), disabled: states.disabled || states.isPartner },
            h("div", { class: classes.RadioContent },
              text.otherRegion,
              h("p", { class: classes.DescriptionText }, text.otherRegionSubtext))),
          slots.registeredInDifferentCountryDetailsSlot)),
      h("sqm-form-message", { type: "info" }, intl.formatMessage({
        id: "cannotChangeInfoAlert",
        defaultMessage: text.cannotChangeInfoAlert,
      }, {
        supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
      })),
      h("div", { class: classes.BtnContainer },
        h("sl-button", { class: classes.PrimaryButton, type: "primary", disabled: states.disabled, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
        h("sl-button", { class: classes.SecondaryButton, type: "text", disabled: states.disabled, onClick: callbacks.onBack, exportparts: "base: secondarybutton-base" }, text.backButton))))));
};
