import { jsxs as f, jsx as i } from "react/jsx-runtime";
import { l as g } from "./index.C1ZfizMq.js";
import { a as k } from "./index.CfQlFjZU.js";
import { useState as C, useCallback as u, useMemo as S } from "react";
import { b as T } from "./index.dWlEA7uO.js";
import { S as y } from "./shared.EdGf6tcG.js";
import { S as r, v as V } from "./social.D59qnHFn.js";
import { B as w } from "./ButtonGroup.GFy-lPs3.js";
import { B as A } from "./Button.CpTwUWVr.js";
import { O as B } from "./Onboarding.BDRBUM0D.js";
import { a as F } from "./Stack.XB4icBMm.js";
import { T as v } from "./Typography.a1p6WNM8.js";
import { S as K } from "./SocialLinkField.gjkX2y3r.js";
function U({
  onNext: s,
  defaultSocialLinks: c = [
    r.TIKTOK,
    r.YOUTUBE,
    r.SPOTIFY
  ],
  loading: l
}) {
  const [o, n] = C(
    c.map((a) => ({
      type: a,
      value: "",
      autoDetect: !1,
      validate: !0,
      isValid: !0
    }))
  ), d = u(
    (a, e, t, O) => {
      n((m) => {
        const p = [...m];
        return p[a] = {
          ...m[a],
          type: t,
          value: e,
          isValid: O
        }, p;
      });
    },
    []
  ), h = u(() => {
    n((a) => [
      ...a,
      {
        type: r.UNKNOWN,
        value: "",
        autoDetect: !0,
        validate: !1,
        isValid: !0
      }
    ]);
  }, []), b = S(() => o.map((a, e) => ({
    ...a,
    onChange: (t) => d(e, t, a.type, a.isValid),
    onSocialLinkDetected: (t) => d(e, a.value, t, a.isValid),
    onValidate: (t) => d(e, a.value, a.type, t)
  })), [o]), L = S(() => {
    const a = o.filter(
      (e) => e.value && e.type !== r.UNKNOWN
    );
    return a.length > 0 && a.filter((e) => !e.isValid).length === 0;
  }, [o]), N = u(() => {
    const a = o.filter(
      (e) => e.value && e.type !== r.UNKNOWN && e.isValid
    );
    s(
      a.map((e) => {
        const t = V(e.type, e.value);
        return {
          type: e.type,
          value: t ? t.toString() : ""
        };
      }).filter((e) => e.value)
    );
  }, [s, o]);
  return {
    buttons: [
      {
        label: "Next",
        semantic: y.PRIMARY,
        disabled: !L || l,
        onClick: N,
        loading: l
      }
    ],
    socialLinkFields: b,
    addSocialLink: h,
    loading: l
  };
}
function x({
  buttons: s,
  socialLinkFields: c,
  addSocialLink: l,
  loading: o
}) {
  return /* @__PURE__ */ f(B, { layout: "section", children: [
    /* @__PURE__ */ f(F, { direction: "column", spacing: 1, children: [
      /* @__PURE__ */ i(v, { variant: "header", size: "xlarge", children: "Tell us more about yourself" }),
      /* @__PURE__ */ i(v, { variant: "body", size: "medium", color: "charcoal", children: "Provide a few more links and we will get you started." })
    ] }),
    /* @__PURE__ */ i(
      g,
      {
        values: c,
        layout: (n) => /* @__PURE__ */ i(K, { ...n, disabled: o })
      }
    ),
    /* @__PURE__ */ i(
      A,
      {
        label: "Add link",
        semantic: y.SECONDARY,
        size: "small",
        prefixIcon: /* @__PURE__ */ i(T, { size: 24 }),
        onClick: l,
        disabled: o
      }
    ),
    /* @__PURE__ */ i(w, { buttons: s, orientation: "vertical" })
  ] });
}
const H = k(x, U);
export {
  H as Q
};
