import D from "../stepper-connector/StepperConnector.js";
import { jsxs as E, jsx as a, Fragment as F } from "react/jsx-runtime";
import { useMemo as l, useCallback as H } from "react";
import { c as t } from "../../../../index-BtlgVD4m.js";
import s from "../../../box/Box.js";
import I from "../stepper-step-counter/StepperStepCounter.js";
import P from "../stepper-step-title/StepperStepTitle.js";
import q from "../../../text/Text.js";
import J from "../../../grid/components/grid-cell/GridCell.js";
import { StepperStepStatus as x } from "../../types/StepperStepStatus.js";
const K = ({
  status: i = "default",
  isNavigable: e = !1,
  isContentActive: j = !1,
  title: v,
  completedTitle: b,
  completedBadgeIcon: N,
  completedBadgeLabel: R,
  description: G,
  completedDescription: w,
  count: d = 1,
  stepperType: C = "horizontal",
  stepperSize: g = "sm",
  children: S,
  isLastStep: y = !1,
  onClick: k
}) => {
  const o = i === x.COMPLETED, m = i === x.ACTIVE, f = i === x.ERROR, h = i === x.WARNING, n = C === "large", p = C === "horizontal", c = C === "vertical", { currentTitle: V, currentDescription: u } = l(
    () => ({
      currentTitle: o && b ? b : v,
      currentDescription: o && w ? w : G
    }),
    [o, b, v, w, G]
  ), r = l(
    () => ({
      // Indicator (circle) styles — background and size per status
      indicator: t(
        "flex items-center justify-center rounded-[var(--border-radius-lg)]",
        "transition-colors duration-200",
        g === "sm" ? "w-[var(--width-w-8)] h-[var(--height-h-8)]" : "w-[var(--width-w-12)] h-[var(--height-h-12)]",
        // Active state: no background, size varies by stepperSize
        n && "w-[var(--width-w-12)] h-[var(--height-h-12)]",
        // Status backgrounds
        !m && !o && !f && !h && "bg-[var(--base-secondary)] text-[var(--base-foreground)]",
        o && "bg-[var(--base-success-background)] text-[var(--base-success-text)]",
        h && "bg-[var(--base-warning-background)] text-[var(--base-warning-text)]",
        f && "bg-[var(--base-danger-background)] text-[var(--base-danger-text)]",
        m && "text-[var(--base-info-text)]"
      ),
      // Connector line styles
      connector: t("transition-colors duration-200", p && "flex-1", c && "h-5 col-start-1 justify-self-center"),
      // Main container styles
      container: t(
        p && "flex items-center gap-[var(--spacing-2)]",
        c && (g === "sm" ? "grid grid-cols-[var(--width-w-12)_auto] gap-x-[var(--spacing-6)] gap-y-[var(--spacing-1-5)]" : "grid grid-cols-[var(--width-w-16)_auto] gap-x-[var(--spacing-6)] gap-y-[var(--spacing-1-5)]"),
        n && "flex flex-col w-full"
      ),
      // Step content wrapper — handles active blue background and hover backgrounds
      stepContentWrapper: t(
        "rounded-[var(--border-radius-lg)]",
        "transition-colors duration-200",
        "flex items-center gap-[var(--spacing-2)] p-[var(--spacing-2)] pr-[var(--spacing-4)] w-fit",
        m && "bg-[var(--base-sidebar-accent)]",
        c && "col-span-full",
        e && "cursor-pointer",
        // Active: blue background (permanent)
        // Navigation hover backgrounds per status
        e && o && "hover:bg-[var(--base-success-background)]",
        e && h && "hover:bg-[var(--base-warning-background)]",
        e && f && "hover:bg-[var(--base-danger-background)]",
        e && !m && !o && !f && !h && "hover:bg-[var(--base-secondary)]"
      ),
      // Children content container styles
      childrenContainer: t("pl-[calc(var(--spacing-12)+var(--spacing-6))]", "pb-[var(--spacing-6)] w-full"),
      // Content wrapper styles
      contentWrapper: t(c ? "col-span-full" : "min-w-0", n && "w-full py-[var(--spacing-6)] pr-[var(--spacing-6)]"),
      // Flex container for layout elements (large layout)
      flexContainer: t("flex items-center gap-[var(--spacing-2)]", n && "gap-[var(--spacing-6)]")
    }),
    [o, m, f, h, p, c, n, e, g]
  ), A = l(() => e ? "button" : "div", [e]), W = l(
    () => /* @__PURE__ */ E(A, { className: r.stepContentWrapper, children: [
      /* @__PURE__ */ a(s, { className: "flex items-center", children: /* @__PURE__ */ a(
        I,
        {
          status: i,
          count: d,
          isHorizontal: p,
          stepperSize: g,
          indicatorStyles: r.indicator
        }
      ) }),
      /* @__PURE__ */ a(
        P,
        {
          currentTitle: V,
          currentDescription: u,
          isLarge: n,
          isNavigable: e,
          status: i,
          completedBadgeLabel: R,
          completedBadgeIcon: N
        }
      )
    ] }),
    [
      i,
      e,
      V,
      u,
      n,
      R,
      N,
      r.indicator,
      r.stepContentWrapper,
      d,
      p,
      g,
      A
    ]
  ), M = l(
    () => /* @__PURE__ */ E(s, { className: "grid grid-cols-5 gap-[var(--spacing-3)]", children: [
      /* @__PURE__ */ a(s, { className: "col-span-2", children: W }),
      /* @__PURE__ */ a(s, { className: "col-span-3 flex items-center", children: n && u && /* @__PURE__ */ a(q, { type: "small", children: u }) })
    ] }),
    [u, n, W]
  ), O = W, T = H(() => {
    k && k();
  }, [k]), _ = l(() => {
    const $ = /* @__PURE__ */ E(F, { children: [
      d === 1 && n && /* @__PURE__ */ a(D, { className: r.connector, isVertical: c }),
      /* @__PURE__ */ a(s, { className: r.contentWrapper, children: n ? M : O }),
      n && j && S && /* @__PURE__ */ a(s, { className: r.childrenContainer, children: S }),
      !y && /* @__PURE__ */ a(D, { className: r.connector, isVertical: c })
    ] });
    return e ? /* @__PURE__ */ a("div", { className: t(r.container, "group"), onClick: T, "aria-label": `Go to step ${d}: ${v}`, children: $ }) : /* @__PURE__ */ a(s, { className: t(r.container, "group"), children: $ });
  }, [
    e,
    r.container,
    T,
    v,
    d,
    n,
    r.connector,
    c,
    r.contentWrapper,
    M,
    O,
    j,
    S,
    r.childrenContainer,
    y
  ]);
  return p ? /* @__PURE__ */ a(s, { className: y ? "shrink-0" : "flex-1", children: _ }) : /* @__PURE__ */ a(J, { columnSpan: { xs: 1 }, children: _ });
};
K.displayName = "StepperStep";
export {
  K as default
};
//# sourceMappingURL=StepperStep.js.map
