"use strict";
const jsxRuntime = require("react/jsx-runtime");
const assert = require("assert");
const clsx = require("clsx");
const React = require("react");
const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const styles_lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
const styles_lib_components_Hidden_Hidden_cjs = require("../Hidden/Hidden.cjs");
const styles_lib_components_Button_Button_cjs = require("../Button/Button.cjs");
const styles_lib_components_Autosuggest_Autosuggest_cjs = require("../Autosuggest/Autosuggest.cjs");
const styles_lib_components_Stepper_Stepper_css_cjs = require("./Stepper.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
const StepContext = React.createContext({
  stepNumber: 0,
  isLast: false
});
const NAV_RIGHT = 0;
const NAV_DOWN = 1;
const NAV_LEFT = 2;
const NAV_UP = 3;
const NAV_HOME = 4;
const NAV_END = 5;
const NAV_TAB = 6;
const NAV_CLICKED = 7;
const NAV_FOCUSED = 8;
const NAV_BLURRED = 9;
const StepperContext = React.createContext(null);
const getNextStep = (moveAmount, current, maxStep) => {
  if (current === null) {
    return moveAmount > 0 ? 1 : maxStep;
  }
  const nextStep = moveAmount + current;
  if (nextStep > maxStep) {
    return 1;
  }
  if (nextStep < 1) {
    return maxStep;
  }
  return nextStep;
};
const StepperContextProvider = ({
  children,
  activeStep,
  stepCount: stepCountProp,
  progress,
  isLinear,
  align,
  tone = "formAccent",
  onStepClick
}) => {
  const stepCount = isLinear ? progress : stepCountProp;
  const [stepperState, dispatch] = React.useReducer(
    (state, action) => {
      switch (action.type) {
        case NAV_UP:
        case NAV_LEFT: {
          return {
            ...state,
            focusedStep: getNextStep(-1, state.focusedStep, stepCount)
          };
        }
        case NAV_DOWN:
        case NAV_RIGHT: {
          return {
            ...state,
            focusedStep: getNextStep(1, state.focusedStep, stepCount)
          };
        }
        case NAV_HOME: {
          return {
            ...state,
            focusedStep: 1
          };
        }
        case NAV_END: {
          return {
            ...state,
            focusedStep: stepCount
          };
        }
        case NAV_BLURRED:
        case NAV_TAB: {
          return {
            ...state,
            focusedStep: null
          };
        }
        case NAV_CLICKED: {
          return {
            ...state,
            focusedStep: action.value
          };
        }
        case NAV_FOCUSED: {
          return {
            ...state,
            focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
          };
        }
        default:
          return state;
      }
    },
    {
      focusedStep: null,
      activeStep,
      isLinear,
      tone,
      align,
      progress,
      onStepClick
    }
  );
  const onKeyUp = (event) => {
    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
    if (targetKey === "Tab") {
      return;
    }
    const action = {
      ArrowRight: { type: NAV_RIGHT },
      ArrowLeft: { type: NAV_LEFT },
      ArrowUp: { type: NAV_UP },
      ArrowDown: { type: NAV_DOWN },
      Home: { type: NAV_HOME },
      End: { type: NAV_END }
    };
    if (action[targetKey]) {
      dispatch(action[targetKey]);
    }
  };
  const onKeyDown = (event) => {
    const targetKey = styles_lib_components_Autosuggest_Autosuggest_cjs.normalizeKey(event);
    if (targetKey === "Tab") {
      dispatch({ type: NAV_TAB });
      return;
    }
    const isNavigationKeyPress = targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey);
    if (isNavigationKeyPress) {
      event.preventDefault();
    }
  };
  const onFocus = () => dispatch({
    type: NAV_FOCUSED
  });
  const onBlur = () => dispatch({
    type: NAV_BLURRED
  });
  const onClick = (index) => dispatch({
    type: NAV_CLICKED,
    value: index
  });
  return /* @__PURE__ */ jsxRuntime.jsx(
    StepperContext.Provider,
    {
      value: {
        ...stepperState,
        activeStep,
        isLinear,
        align,
        tone,
        progress,
        onStepClick,
        ...typeof onStepClick === "function" ? {
          onKeyUp,
          onKeyDown,
          onClick,
          onFocus,
          onBlur
        } : {}
      },
      children
    }
  );
};
const StepIndicator = ({ complete, started, active }) => /* @__PURE__ */ jsxRuntime.jsxs(
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    xmlSpace: "preserve",
    focusable: "false",
    viewBox: "0 0 24 24",
    className: clsx__default.default(
      styles_lib_components_Stepper_Stepper_css_cjs.indicator,
      complete || active || started ? styles_lib_components_Stepper_Stepper_css_cjs.highlight : void 0,
      complete && !active ? styles_lib_components_Stepper_Stepper_css_cjs.complete : void 0,
      active ? styles_lib_components_Stepper_Stepper_css_cjs.active : void 0
    ),
    children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        "circle",
        {
          fill: "none",
          stroke: "currentColor",
          strokeWidth: 4,
          cx: 12,
          cy: 12,
          r: 10
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 5, className: styles_lib_components_Stepper_Stepper_css_cjs.inner }),
      /* @__PURE__ */ jsxRuntime.jsx(
        "path",
        {
          d: "M 18.26 7.64 C 17.94 7.32 17.46 7.32 17.14 7.64 L 9.7 15.08 L 7.06 12.44 C 6.74 12.12 6.26 12.12 5.94 12.44 S 5.62 13.24 5.94 13.56 L 9.14 16.76 C 9.3 16.92 9.46 17 9.7 17 S 10.1 16.92 10.26 16.76 L 18.26 8.76 C 18.58 8.44 18.58 7.96 18.26 7.64 Z",
          className: styles_lib_components_Stepper_Stepper_css_cjs.tick
        }
      )
    ]
  }
);
const Step = ({ complete = false, id, children }) => {
  const stepRef = React.useRef(null);
  const { stepNumber, isLast } = React.useContext(StepContext);
  const stepperContext = React.useContext(StepperContext);
  assert__default.default(
    stepperContext !== null,
    "A Step must be rendered as a child of a Stepper. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Stepper"
  );
  const {
    focusedStep,
    activeStep,
    tone,
    align,
    progress,
    isLinear,
    onKeyUp,
    onKeyDown,
    onClick,
    onFocus,
    onBlur,
    onStepClick
  } = stepperContext;
  const active = activeStep === stepNumber;
  const focused = focusedStep === stepNumber;
  const linearStepBeforeProgress = isLinear && stepNumber < progress;
  const completed = complete || linearStepBeforeProgress;
  const started = active || complete || isLinear && stepNumber <= progress;
  const keyboardAccessible = focused || active && focusedStep === null;
  const interactable = typeof onStepClick === "function" && !active && (!isLinear || stepNumber <= progress);
  React.useEffect(() => {
    if (stepRef.current && focused) {
      stepRef.current.focus();
    }
  }, [focused]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component: "button",
      ref: stepRef,
      position: "relative",
      outline: "none",
      display: "flex",
      justifyContent: { tablet: align === "center" ? "center" : void 0 },
      width: "full",
      cursor: interactable ? "pointer" : void 0,
      pointerEvents: !interactable && !active ? "none" : void 0,
      "aria-current": active ? "step" : void 0,
      className: [styles_lib_components_Stepper_Stepper_css_cjs.step, styles_lib_components_Stepper_Stepper_css_cjs.tone[tone]],
      onClick: interactable ? () => {
        if (onClick) {
          onClick(stepNumber);
        }
        if (onStepClick) {
          onStepClick({ id, stepNumber });
        }
      } : void 0,
      onKeyUp,
      onKeyDown,
      onFocus,
      onBlur: keyboardAccessible ? onBlur : void 0,
      tabIndex: keyboardAccessible ? 0 : -1,
      children: [
        !isLast ? /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Box_Box_cjs.Box,
          {
            component: "span",
            position: "absolute",
            overflow: "hidden",
            borderRadius: "full",
            className: [
              styles_lib_components_Stepper_Stepper_css_cjs.progressTrack,
              align === "center" ? styles_lib_components_Stepper_Stepper_css_cjs.progressTrackCentered : void 0
            ],
            children: /* @__PURE__ */ jsxRuntime.jsx(
              styles_lib_components_Box_Box_cjs.Box,
              {
                component: "span",
                position: "absolute",
                top: 0,
                bottom: 0,
                left: 0,
                width: "full",
                className: [
                  styles_lib_components_Stepper_Stepper_css_cjs.progressLine,
                  !linearStepBeforeProgress ? styles_lib_components_Stepper_Stepper_css_cjs.progressUnfilled : void 0
                ]
              }
            )
          }
        ) : null,
        /* @__PURE__ */ jsxRuntime.jsxs(
          styles_lib_components_Stack_Stack_cjs.Stack,
          {
            component: "span",
            space: "medium",
            align: {
              mobile: "left",
              tablet: align === "center" ? "center" : void 0
            },
            children: [
              /* @__PURE__ */ jsxRuntime.jsxs(
                styles_lib_components_Box_Box_cjs.Box,
                {
                  component: "span",
                  display: "block",
                  position: "relative",
                  transition: "fast",
                  className: styles_lib_components_Stepper_Stepper_css_cjs.indicatorContainer,
                  "aria-hidden": true,
                  children: [
                    /* @__PURE__ */ jsxRuntime.jsx(
                      styles_lib_components_Button_Button_cjs.FieldOverlay,
                      {
                        variant: "focus",
                        borderRadius: "full",
                        onlyVisibleForKeyboardNavigation: true,
                        className: styles_lib_components_Stepper_Stepper_css_cjs.focusOverlay
                      }
                    ),
                    /* @__PURE__ */ jsxRuntime.jsx(
                      StepIndicator,
                      {
                        complete: completed,
                        active,
                        started
                      }
                    )
                  ]
                }
              ),
              /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Hidden_Hidden_cjs.Hidden, { component: "span", below: "tablet", children: /* @__PURE__ */ jsxRuntime.jsx(
                styles_lib_components_Box_Box_cjs.Box,
                {
                  component: "span",
                  display: "block",
                  paddingX: align === "center" ? "xsmall" : void 0,
                  paddingRight: align === "left" && !isLast ? "xsmall" : void 0,
                  userSelect: "none",
                  children: /* @__PURE__ */ jsxRuntime.jsx(
                    styles_lib_components_Accordion_AccordionItem_cjs.Text,
                    {
                      align: align === "center" ? "center" : void 0,
                      weight: started ? "strong" : void 0,
                      tone: !started ? "secondary" : void 0,
                      children
                    }
                  )
                }
              ) })
            ]
          }
        )
      ]
    }
  );
};
Step.__isStep__ = true;
exports.Step = Step;
exports.StepContext = StepContext;
exports.StepperContextProvider = StepperContextProvider;
