import { jsxs as d, jsx as o } from "react/jsx-runtime";
import f from "react";
import g from "axios";
import { Typography as m, CircularProgress as b } from "@mui/material";
import { mergeProps as y } from "../Util/index.js";
import { warn as x } from "../Util/deprecate.js";
import v from "../Button/index.js";
import { styled as w } from "../Theme/index.js";
function S({ formId: t, portalId: e }, s, r) {
  const a = `https://api.hsforms.com/submissions/v3/integration/submit/${e}/${t}`;
  return g.post(a, {
    submittedAt: Date.now(),
    fields: Object.keys(s).map((i) => ({
      name: i.replace(/\s+/, "").toLowerCase(),
      value: s[i]
    })),
    context: r,
    skipValidation: !1
  }).then((i) => i.data.inlineMessage).catch((i) => i.data ? i.data.message : "Form Submit Failed");
}
const l = class l extends f.Component {
  constructor(e) {
    super(e), this.onSubmit = async (s) => {
      s.preventDefault(), this.setState({ loading: !0 });
      try {
        const r = await S(
          { formId: this.props.formId, portalId: this.props.portalId },
          this.fields.reduce((a, i) => (a[i] = this.state[i], a), {}),
          {
            pageUri: window.location.href,
            pageName: document.title
          }
        );
        this.setState({
          loading: !1,
          successMessage: r || this.props.successMessage
        });
      } catch (r) {
        this.setState({
          loading: !1,
          errorMessage: r ? r.message : "Form submit failed"
        });
      }
    }, this.getInputHandler = (s, r = {}) => (a) => {
      this.setState(
        Object.assign(r, {
          [s]: a.target.value
        })
      );
    }, typeof e.fields == "string" ? this.fields = e.fields.split(",").map((s) => s.trim()) : this.fields = e.fields, this.state = {
      loading: !1,
      errorMessage: "",
      successMessage: ""
    }, this.fields.forEach((s) => {
      this.state[s] = "";
    }), x("ContactForm");
  }
  deriveProps() {
    const e = y(this.props, l);
    return typeof e.title > "u" && (e.title = "Signup for our news letter"), e.button || (e.button = "Subscribe"), e;
  }
  render() {
    const { className: e, style: s, title: r, button: a, layout: i } = this.deriveProps(), { loading: c, errorMessage: u, successMessage: p } = this.state;
    return /* @__PURE__ */ d(
      I,
      {
        onSubmit: this.onSubmit,
        className: e,
        style: s,
        layout: i,
        fieldCount: this.fields.length,
        name: "subscribe",
        children: [
          !!r && /* @__PURE__ */ o(m, { component: "p", className: "title", children: r }),
          /* @__PURE__ */ d("div", { className: "form-controls", children: [
            this.fields.map((n) => /* @__PURE__ */ o(
              "input",
              {
                required: !0,
                type: "text",
                value: this.state[n],
                onChange: this.getInputHandler(n),
                className: "input",
                placeholder: n
              },
              n
            )),
            /* @__PURE__ */ o(
              v,
              {
                variant: "outlined",
                type: "submit",
                color: "inherit",
                size: "large",
                disabled: c,
                className: "subscribe-btn-empty",
                children: c ? /* @__PURE__ */ o(b, { size: 28 }) : a
              }
            )
          ] }),
          !!u && /* @__PURE__ */ o(
            m,
            {
              component: "p",
              variant: "body1",
              className: "error",
              color: "secondary",
              dangerouslySetInnerHTML: { __html: u }
            }
          ),
          !!p && /* @__PURE__ */ o(
            m,
            {
              component: "p",
              variant: "body1",
              className: "success",
              color: "primary",
              dangerouslySetInnerHTML: { __html: p }
            }
          )
        ]
      }
    );
  }
};
l.defaultProps = {
  className: "",
  portalId: "4796488",
  formId: "929a510f-34f4-4251-98b3-34175200aebd",
  title: void 0,
  button: "",
  layout: "vertical",
  successMessage: "Form Submit Success",
  fields: ["Email", "First Name", "Last Name"]
};
let h = l;
const M = (t) => t.layout === "vertical" ? "100%" : `${Math.max(95 / (t.fieldCount + 1), 20)}%`, I = w("form", {
  shouldForwardProp: (t) => t !== "layout" && t !== "fieldCount"
})`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @media (max-width: ${(t) => t.theme.breakpoints.values.sm}px) {
    width: 100% !important;
  }
  max-width: 800px;
  margin: 0px auto;

  .title {
    font-size: 30px;
    text-align: center;
    color: ${(t) => t.theme.typography.color.main};
  }

  .form-controls {
    width: 100%;
    flex-direction: ${(t) => t.layout === "vertical" ? "column" : "row"};
    justify-content: space-between;
    align-items: center;

    .input {
      width: ${(t) => M(t)};
      height: 50px;
      border: none;
      border-bottom: 1px solid
        ${(t) => t.theme.typography.color.main};
      font-size: 16px;
      letter-spacing: 1.8px;
      outline: none;
      margin: ${(t) => t.layout === "vertical" ? "12px 0" : "12px"};
      background: transparent;

      &:first-of-type {
        margin-top: 40px;
      }
    }

    .subscribe-btn-empty {
      margin-top: ${(t) => t.layout === "vertical" ? "40px" : "0"};
      width: ${(t) => t.layout === "vertical" ? "100%" : "auto"};
    }
  }

  .error,
  .success {
    margin-top: 20px;
  }
`;
export {
  h as default,
  S as submitContactForm
};
