import { jsx as e, jsxs as h } from "react/jsx-runtime";
import { a as I } from "./index.CfQlFjZU.js";
import { M as S, a as R } from "./index.dWlEA7uO.js";
import { a as x, B as E } from "./Button.CpTwUWVr.js";
import { a as g } from "./TextInput.63vMRxAK.js";
import { a as P } from "./ProgressActivity.DYLCzf8q.js";
import { F as M } from "./form.BJJLcx4p.js";
import { O as T } from "./Onboarding.BDRBUM0D.js";
const U = "creator_contentContainerStretch_1RYOR", k = "creator_mainContentContainer_25E0r", D = "creator_formContainer_q49xa", F = "creator_sectionFormContainer_GlZwZ", z = "creator_header_ffGtX", B = "creator_body_-cQLd", G = "creator_successIcon_TPnk4", L = "creator_validatingIcon_f9R7b", W = "creator_validatingIconWrapper_f0Gqg", r = { contentContainerStretch: U, mainContentContainer: k, formContainer: D, sectionFormContainer: F, header: z, body: B, successIcon: G, validatingIcon: L, validatingIconWrapper: W };
function j({
  onSubmit: c,
  loading: t,
  usernameInput: a,
  onUsernameChange: l,
  displayNameInput: s,
  onDisplayNameChange: m,
  shouldRemoveForm: u,
  autoCompleteAutoCorrectOff: o
}) {
  function d(n) {
    n.preventDefault(), c?.();
  }
  const f = {
    IDLE: void 0,
    LOADING: /* @__PURE__ */ e("div", { className: r.validatingIconWrapper, children: /* @__PURE__ */ e(P, { className: r.validatingIcon }) }),
    ERROR: /* @__PURE__ */ e(R, { size: 24 }),
    SUCCESS: /* @__PURE__ */ e(S, { size: 24, className: r.successIcon })
  }[a.status];
  function p(n) {
    l(n.target.value);
  }
  function i(n) {
    m(n.target.value);
  }
  return {
    onSubmit: d,
    loading: t,
    disabled: a.status !== "SUCCESS" || s.value === "" || !!t,
    buttonType: x.SUBMIT,
    usernameInputIcon: f,
    usernameInputError: a.status === "ERROR",
    usernameInputHelperMessage: "errorMessage" in a ? a.errorMessage : "Your Komi URL",
    usernameInputValue: a.value,
    onUsernameChange: p,
    displayNameInputValue: s.value,
    onDisplayNameChange: i,
    formContainerClassName: r.formContainer,
    headerClassName: r.header,
    bodyClassName: r.body,
    isNativeForm: !u,
    autoComplete: o ? "off" : void 0,
    autoCorrect: o ? "off" : void 0,
    spellCheck: o ? !1 : void 0,
    autoCapitalize: o ? "none" : void 0
  };
}
function w({
  onSubmit: c,
  loading: t,
  disabled: a,
  buttonType: l,
  usernameInputIcon: s,
  usernameInputError: m,
  usernameInputHelperMessage: u,
  usernameInputValue: o,
  onUsernameChange: d,
  displayNameInputValue: f,
  onDisplayNameChange: p,
  formContainerClassName: i,
  headerClassName: n,
  bodyClassName: C,
  isNativeForm: v,
  autoComplete: y,
  autoCorrect: _,
  spellCheck: N,
  autoCapitalize: b
}) {
  return /* @__PURE__ */ e(T, { layout: "column", children: /* @__PURE__ */ h(
    M,
    {
      isNative: v,
      formProps: { className: i, onSubmit: c },
      divProps: { className: i },
      children: [
        /* @__PURE__ */ h("div", { children: [
          /* @__PURE__ */ e("h1", { className: n, children: "Set up your profile" }),
          /* @__PURE__ */ e("p", { className: C, children: "We just need a couple of things to finish setting up your page." })
        ] }),
        /* @__PURE__ */ e(
          g,
          {
            label: "Name",
            name: "displayName",
            helper: "The name your audience knows you by",
            value: f,
            onChange: p
          }
        ),
        /* @__PURE__ */ e(
          g,
          {
            label: "Username",
            name: "username",
            suffixText: ".komi.io",
            helper: u,
            isError: m,
            suffixIcon: s,
            value: o,
            onChange: d,
            autoComplete: y,
            autoCorrect: _,
            spellCheck: N,
            autoCapitalize: b
          }
        ),
        /* @__PURE__ */ e(
          E,
          {
            label: "Next",
            size: "full",
            type: l,
            loading: t,
            disabled: a
          }
        )
      ]
    }
  ) });
}
const X = I(w, j);
export {
  X as P
};
