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: {
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "flex-start",
    flexDirection: "column",
    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: "24px",
  },
  BtnContainer: {
    paddingTop: "36px",
    display: "flex",
    gap: "8px",
  },
  ErrorText: {
    color: "var(--sqm-danger-color-icon)",
    marginTop: "10px",
  },
  DescriptionText: {
    color: "var(--sl-color-neutral-500)",
  },
  BoldText: {
    fontWeight: "bold",
  },
  Container: {
    width: "100%",
    display: "flex",
    justifyContent: "flex-start",
    flexDirection: "column",
    gap: "16px",
  },
  CheckboxWrapper: {
    display: "flex",
    justifyContent: "flex-start",
    flexDirection: "column",
  },
  InfoIcon: {
    height: "24px",
    width: "24px",
  },
  RadioText: {
    fontSize: "var(--sl-font-size-small)",
  },
  PageDescriptionText: {
    color: "var(--sqm-text-subdued)",
    fontSize: "var(--sl-font-size-medium)",
  },
  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;
  }

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


  `;
export const DocusignFormView = (props) => {
  var _a;
  const { states, states: { formState, documentTypeString }, callbacks, text, slots, } = props;
  const { classes } = sheet;
  return (h("div", { class: classes.Container },
    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(--sqm-informative-color-icon)" } }),
        h("h2", { style: { fontSize: "var(--sl-font-size-large)" } }, text.modalTitle)),
      h("p", null, intl.formatMessage({
        id: "modalText",
        defaultMessage: text.modalDescription,
      }, {
        br: h("br", null),
      })),
      h("sl-button", { slot: "footer", type: "primary", class: sheet.classes.DialogButton, onClick: callbacks.onModalClose, 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", null, text.taxForm),
        h("p", { class: classes.PageDescriptionText }, text.taxAndPayoutsDescription))),
    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)),
      }))),
    h("div", null,
      h("div", null,
        h("h5", { class: classes.BoldText }, intl.formatMessage({ id: "tax-form-label", defaultMessage: text.taxFormLabel }, { documentType: documentTypeString })),
        h("p", null, intl.formatMessage({
          id: "tax-form-description",
          defaultMessage: states.documentType === "W9"
            ? text.taxFormDescription
            : formState.participantType === "individualParticipant"
              ? text.taxFormDescriptionIndividualParticipant
              : text.taxFormDescriptionBusinessEntity,
        }, { documentType: documentTypeString }))),
      h("div", null, slots.docusignIframeSlot),
      h("div", { class: classes.BtnContainer }, states.showExitButton && (h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: callbacks.onExit }, text.exitButton))))));
};
