import { jsxs as h, jsx as e } from "react/jsx-runtime";
import { useRef as k, useState as y, useMemo as N } from "react";
import { a as _ } from "./index.CfQlFjZU.js";
import { S as x } from "./shared.EdGf6tcG.js";
import { B as I } from "./Button.CpTwUWVr.js";
import { a as P } from "./ProgressTracker.DyY57Wb4.js";
import { C as A } from "./CropProfilePreview.COHgUwuK.js";
import { O as v } from "./Onboarding.BDRBUM0D.js";
const w = "creator_mainContentContainer_3Z0Pl", j = "creator_header_X-C51", z = "creator_body_T10Vr", O = "creator_output_8-U2B", b = { mainContentContainer: w, header: j, body: z, output: O };
function B({
  displayName: i,
  previewIcons: s,
  imageFile: a,
  onImageChange: c,
  onCropComplete: l,
  loading: m
}) {
  const n = k(null);
  function p() {
    n.current?.click();
  }
  function d(g) {
    const r = g.target.files?.[0];
    r && c(r);
  }
  const [t, C] = y(), [o, u] = y();
  function f(g, r) {
    C(g), u(r);
  }
  function R() {
    !t || !o || l(t, o);
  }
  const S = N(() => window.URL.createObjectURL(a), [a]);
  return {
    displayName: i,
    mainContentContainerClassName: b.mainContentContainer,
    headerClassName: b.header,
    bodyClassName: b.body,
    steps: [{ label: "Links" }, { label: "Image" }, { label: "Content" }],
    activeStepIndex: 1,
    previewIcons: s,
    onCropChange: f,
    onCropSubmit: R,
    imageSrc: S,
    onImageReplaceClick: p,
    onImageChange: d,
    fileInputRef: n,
    loading: m
  };
}
function L({
  mainContentContainerClassName: i,
  headerClassName: s,
  bodyClassName: a,
  steps: c,
  activeStepIndex: l,
  previewIcons: m,
  displayName: n,
  onCropSubmit: p,
  onCropChange: d,
  imageSrc: t,
  fileInputRef: C,
  onImageReplaceClick: o,
  onImageChange: u,
  loading: f
}) {
  return /* @__PURE__ */ h(v, { layout: "plain", children: [
    /* @__PURE__ */ e(P, { steps: c, activeStepIndex: l }),
    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
      A,
      {
        icons: m,
        displayName: n,
        imageSrc: t,
        onCropAreaChange: d
      }
    ) }),
    /* @__PURE__ */ h("div", { className: i, children: [
      /* @__PURE__ */ h("div", { children: [
        /* @__PURE__ */ e("h1", { className: s, children: "Customize your header image" }),
        /* @__PURE__ */ e("p", { className: a, children: "Resize and trim your image to make it fit your page header." })
      ] }),
      /* @__PURE__ */ e(
        I,
        {
          label: "Next",
          size: "full",
          onClick: p,
          loading: f
        }
      ),
      /* @__PURE__ */ e(
        I,
        {
          label: "Replace Image",
          size: "small",
          onClick: o,
          semantic: x.SECONDARY
        }
      ),
      /* @__PURE__ */ e(
        "input",
        {
          "data-testid": "file-input",
          type: "file",
          ref: C,
          onChange: u,
          hidden: !0,
          accept: "image/png,image/jpeg,image/webp"
        }
      )
    ] })
  ] });
}
const Y = _(L, B);
export {
  Y as H
};
