import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import React__default, { memo, useMemo } from "react";
import { getAssetUrl } from "../../utils/assetBase.js";
import { Button } from "../Button/index.js";
import { DynamicLayout } from "../DynamicLayout/index.js";
import { Stepper } from "../Stepper/index.js";
/* empty css                           */
const createFlowImage = getAssetUrl("icons/createFlowImage.svg");
function LeftPanelContent({
  leftPanelTitle,
  leftPanelDescription,
  leftPanelImage
}) {
  return /* @__PURE__ */ jsxs("div", { className: "left-panel-content", children: [
    /* @__PURE__ */ jsxs("div", { className: "left-panel-title", children: [
      /* @__PURE__ */ jsx("h1", { children: leftPanelTitle }),
      /* @__PURE__ */ jsx("p", { children: leftPanelDescription })
    ] }),
    leftPanelImage ?? /* @__PURE__ */ jsx("img", { alt: "Create Item Flow", className: "left-panel-image", src: createFlowImage })
  ] });
}
function RightContentPanel({
  showStepper,
  steps,
  step,
  stepperVariant,
  onStepClick,
  headings,
  children,
  contentRef,
  hasScroll,
  actionsChildren,
  onCancel,
  onPrev,
  onNext,
  totalSteps
}) {
  const childArray = React__default.Children.toArray(children ?? []);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    showStepper && /* @__PURE__ */ jsx(
      Stepper,
      {
        activeStep: step - 1,
        handleStep: (index) => onStepClick == null ? void 0 : onStepClick(index + 1),
        orientation: "horizontal",
        steps,
        variant: stepperVariant
      }
    ),
    /* @__PURE__ */ jsx(
      "div",
      {
        ref: contentRef,
        className: `content-wrapper ${!hasScroll ? "no-scroll" : ""}`,
        children: headings.map((heading, index) => /* @__PURE__ */ jsxs("div", { className: "heading", children: [
          /* @__PURE__ */ jsx("h2", { children: heading }),
          childArray[index]
        ] }, index))
      }
    ),
    actionsChildren != null ? /* @__PURE__ */ jsx("div", { className: "actions", children: actionsChildren }) : /* @__PURE__ */ jsxs("div", { className: "actions", children: [
      step === 1 ? /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }) : /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onPrev, children: "Previous" }),
      /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onNext, children: step === totalSteps ? "Submit" : "Next" })
    ] })
  ] });
}
const CreateItemFlow = memo(function CreateItemFlow2({
  step = 1,
  totalSteps = 3,
  leftPanelWidth,
  headings = [],
  children,
  onCancel,
  onNext,
  onPrev,
  onStepClick,
  stepperVariant = "progress",
  leftPanelTitle = "Create item",
  leftPanelDescription = "",
  leftPanelImage = null,
  actionsChildren = null,
  showStepper = true
}) {
  const steps = useMemo(
    () => Array.from({ length: totalSteps }, (_, idx) => ({
      label: `Step ${idx + 1}`,
      description: `Step ${idx + 1} of ${totalSteps}`
    })),
    [totalSteps]
  );
  const rightContent = /* @__PURE__ */ jsx(
    RightContentPanel,
    {
      actionsChildren,
      contentRef: { current: null },
      hasScroll: false,
      headings,
      showStepper,
      step,
      stepperVariant,
      steps,
      totalSteps,
      onCancel,
      onNext,
      onPrev,
      onStepClick,
      children
    }
  );
  return /* @__PURE__ */ jsx(
    DynamicLayout,
    {
      leftPanel: /* @__PURE__ */ jsx(
        LeftPanelContent,
        {
          leftPanelDescription,
          leftPanelImage,
          leftPanelTitle
        }
      ),
      leftPanelWidth,
      rightContent,
      showStepper
    }
  );
});
export {
  CreateItemFlow
};
