import { h } from "@stencil/core";
import { intl } from "../../../global/global";
import { createStyleSheet } from "../../../styling/JSS";
import { FORM_STEPS } from "../data";
const style = {
  ModalTitleContainer: {
    display: "flex",
    gap: "var(--sl-spacing-small)",
    alignItems: "center",
  },
  FormWrapper: {
    display: "flex",
    justifyContent: "flex-start",
    flexDirection: "column",
  },
  CheckboxContainer: {
    alignItems: "flex-start",
    justifyContent: "flex-start",
    gap: "var(--sl-spacing-xx-small)",
  },
  TitleContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    gap: "var(--sl-spacing-small)",
  },
  TextContainer: {
    display: "flex",
    justifyContent: "flex-start",
    flexDirection: "column",
    gap: "var(--sl-spacing-medium)",
    paddingBottom: "16px",
  },
  BtnContainer: {
    paddingTop: "36px",
    display: "flex",
    gap: "8px",
  },
  ErrorText: {
    color: "var(--sqm-danger-color-icon)",
    marginTop: "10px",
  },
  PageDescriptionText: {
    color: "var(--sqm-text-subdued)",
    fontSize: "var(--sl-font-size-medium)",
  },
  DescriptionText: {
    color: "var(--sqm-text-subdued)",
  },
  RadioContainer: {
    display: "flex",
    flexDirection: "column",
  },
  Checkbox: {
    "&::part(control)": {
      borderRadius: "50% !important",
    },
    "&::part(label)": {
      fontSize: "var(--sl-font-size-small)",
    },
  },
  InputContainer: {
    padding: "16px",
    margin: "16px 0px 16px 0px",
    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
    borderBottom: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
    display: "flex",
    flexDirection: "column",
    width: "100%",
    gap: "16px",
    "& sl-input::part(base)": {
      maxWidth: "450px",
    },
    "& sl-input::part(label)": {
      fontSize: "var(--sl-font-size-small)",
    },
    "& sl-select::part(base)": {
      maxWidth: "450px",
    },
    "& sl-select::part(label)": {
      fontSize: "var(--sl-font-size-small)",
    },
  },
  CheckboxSkeleton: {
    width: "16px",
    height: "16px",
    borderRadius: "50%",
    background: "var(--sqm-skeleton-background)",
  },
  SmallSkeleton: {
    width: "100px",
    height: "16px",
    borderRadius: "50px",
    background: "var(--sqm-skeleton-background)",
  },
  LargeSkeleton: {
    width: "100%",
    maxWidth: "320px",
    height: "40px",
    borderRadius: "50px",
    background: "var(--sqm-skeleton-background)",
  },
  InfoWarningIcon: {
    height: "26px",
    width: "26px",
  },
  Dialog: {
    "&::part(panel)": {
      maxWidth: "420px",
    },
    "&::part(title)": {
      fontSize: "var(--sl-font-size-large)",
      fontWeight: "600",
    },
    "&::part(body)": {
      padding: "0 var(--sl-spacing-x-large) 0 var(--sl-spacing-x-large)",
      fontSize: "var(--sl-font-size-small)",
    },
    "&::part(footer)": {
      display: "flex",
      flexDirection: "column",
      gap: "var(--sl-spacing-small)",
      marginBottom: "var(--sl-spacing-xx-small)",
      alignItems: "center",
      flex: "1",
    },
  },
  DialogButton: { margin: "auto", width: "100%" },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const vanillaStyle = `
    :host{
      display: block;   
    }
    * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
    }

    & sl-select::part(label) {
      font-size: var(--sl-font-size-small);
      font-weight: 600
    }

    /* this class is dynamically applied in controller */
    .error-input::part(base) {
      --sqm-input-border-color: var(--sqm-danger-color-border);
      --sl-input-border-color: var(--sqm-danger-color-border);
      --sl-input-border-color-hover: var(--sqm-danger-color-border);  
      --sl-input-border-color-focus: var(--sqm-danger-color-background);
    }

    .error-input::part(help-text) {
      color: var(--sqm-danger-color-text);
    }
    
  `;
export const BankingInfoFormView = (props) => {
  var _a;
  const { states, states: { formState }, callbacks, text, refs, slots, } = props;
  const { classes } = sheet;
  const getLoadingSkeleton = (checkedValue, inputNumber) => {
    let inputNumArray = Array(inputNumber).fill(0);
    const flexBoxStyle = {
      display: "flex",
      gap: "8px",
    };
    if (checkedValue === undefined) {
      return (h("div", { style: { ...flexBoxStyle, flexDirection: "column", gap: "16px" } },
        h("div", { class: classes.SmallSkeleton }),
        h("div", { style: { ...flexBoxStyle, flexDirection: "row" } },
          h("div", { class: classes.CheckboxSkeleton }),
          h("div", { class: classes.SmallSkeleton })),
        h("div", { style: { ...flexBoxStyle, flexDirection: "row" } },
          h("div", { class: classes.CheckboxSkeleton }),
          h("div", { class: classes.SmallSkeleton }))));
    }
    if (checkedValue === "toPayPalAccount") {
      return (h("div", { style: { ...flexBoxStyle, flexDirection: "column" } },
        h("div", { class: classes.SmallSkeleton }),
        h("div", { class: classes.LargeSkeleton })));
    }
    const skeletons = inputNumArray.map((_, idx) => (h("div", { style: { ...flexBoxStyle, flexDirection: "column" }, key: idx },
      h("div", { class: classes.SmallSkeleton }),
      h("div", { class: classes.LargeSkeleton }))));
    return skeletons;
  };
  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("sl-dialog", { class: sheet.classes.Dialog, open: states.showModal, "onSl-hide": callbacks.onModalClose },
      h("div", { class: classes.ModalTitleContainer, slot: "label" },
        h("sl-icon", { name: "info-circle", style: { color: "var(--sl-color-info-500)" } }),
        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
      h("p", null, text.modalDescription),
      h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, submit: true, exportparts: "base: primarybutton-base" }, text.modalButtonText)),
    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", { style: { fontSize: "24px" } }, text.taxAndPayouts),
        h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription)),
      ((_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 && !states.hideSteps && (h("sqm-form-message", { 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.paymentMethod),
        h("p", { class: classes.DescriptionText }, text.paymentMethodSubtext))),
    h("div", null,
      h("div", { class: classes.CheckboxContainer }, states.loading && formState.paymentMethodChecked === undefined ? (getLoadingSkeleton(undefined)) : (h("div", { class: classes.RadioContainer },
        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "base: radio-base", checked: formState.paymentMethodChecked === "toBankAccount", onInput: () => callbacks.setPaymentMethodChecked("toBankAccount"), disabled: states.disabled, id: "toBankAccount", name: "/toBankAccount" }, text.directlyToBankAccount)),
        formState.paymentMethodChecked === "toBankAccount" && (h("div", { class: classes.InputContainer, style: states.hideBanking ? { display: "none" } : {} }, states.loading
          ? getLoadingSkeleton("toBankAccount", slots.formInputsSlot.length + 3)
          : [
            slots.countryInputSlot,
            slots.paymentMethodSlot,
            slots.formInputsSlot,
          ])),
        states.hasPayPal && (h("sl-radio", { class: classes.Checkbox, exportparts: "base: radio-base", checked: formState.paymentMethodChecked === "toPayPalAccount", onInput: () => callbacks.setPaymentMethodChecked("toPayPalAccount"), disabled: states.disabled, id: "toPayPalAccount", name: "/toPayPalAccount" }, intl.formatMessage({
          id: "paypal-input-label",
          defaultMessage: text.toPayPalAccount,
        }, { feeCap: states.feeCap }))),
        formState.paymentMethodChecked === "toPayPalAccount" && (h("div", { class: classes.InputContainer, style: states.hidePayPal ? { display: "none" } : {} }, states.loading
          ? getLoadingSkeleton("toPayPalAccount")
          : slots.paypalInputSlot)),
        h("div", { style: { paddingTop: "24px", paddingBottom: "12px" } },
          h("h4", null, text.paymentSchedule)),
        h("sl-radio", { class: classes.Checkbox, exportparts: "base: radio-base", checked: formState.paymentScheduleChecked === "BALANCE_THRESHOLD", onInput: () => callbacks.setPaymentScheduleChecked("BALANCE_THRESHOLD"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "BALANCE_THRESHOLD" }, text.paymentScheduleBalanceThreshold),
        formState.paymentScheduleChecked === "BALANCE_THRESHOLD" && (h("div", { class: classes.InputContainer, style: states.hideBalanceThreshold ? { display: "none" } : {} }, states.loading
          ? getLoadingSkeleton("toPayPalAccount")
          : slots.paymentThresholdSelectSlot)),
        h("sl-radio", { class: classes.Checkbox, exportparts: "base: radio-base", checked: formState.paymentScheduleChecked === "FIXED_DAY", onInput: () => callbacks.setPaymentScheduleChecked("FIXED_DAY"), disabled: states.disabled, id: "paymentSchedulingType", name: "/paymentSchedulingType", value: "FIXED_DAY" }, text.paymentScheduleFixedDay),
        formState.paymentScheduleChecked === "FIXED_DAY" && (h("div", { class: classes.InputContainer, style: states.hideFixedDay ? { display: "none" } : {} }, states.loading
          ? getLoadingSkeleton("toPayPalAccount")
          : slots.paymentFixedDaySelectSlot))))),
      h("div", { class: classes.BtnContainer },
        h("sl-button", Object.assign({ type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading }, (states.hideSteps
          ? { onClick: callbacks.onModalOpen }
          : { submit: "submit" }), { exportparts: "base: primarybutton-base" }), text.continueButton),
        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", type: "secondary", onClick: callbacks.onBack }, text.backButton))))));
};
