import { jsxs, jsx } from 'react/jsx-runtime';
import { useColorModeValue, Box, Text, chakra, Stack, Tooltip, Icon } from '@chakra-ui/react';
import { MdCheck } from 'react-icons/md';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
function StepsItem(props) {
  const selectedColor = useColorModeValue("darkblue.900", "white");
  const trackColor = useColorModeValue("blackAlpha.400", "whiteAlpha.500");
  const textColor = useColorModeValue("white", "black");
  const {
    name,
    description,
    status,
    index,
    onClick,
    isTextVisible = false,
    direction = "horizontal",
    gap,
    showTrack = false
  } = props;
  const trackDirection = direction !== "vertical" ? "row" : "column";
  const textDirection = direction === "vertical" ? "row" : "column";
  const bulletSize = 8;
  const style = {
    incomplete: {
      bg: "transparent",
      color: trackColor,
      borderColor: trackColor
    },
    complete: {
      bg: "transparent",
      color: selectedColor,
      borderColor: selectedColor
    },
    current: {
      bg: selectedColor,
      color: textColor,
      borderColor: selectedColor
    }
  }[status];
  const textComponent = /* @__PURE__ */ jsxs(
    Box,
    {
      position: "relative",
      top: direction === "horizontal" ? 0 : "0.25rem",
      left: direction === "horizontal" ? 0 : "0.25rem",
      children: [
        /* @__PURE__ */ jsx(Text, { fontWeight: "medium", "data-testid": `steps-item-name-${props.index}`, children: name }),
        description ? /* @__PURE__ */ jsx(Text, { opacity: "0.8", "data-testid": `steps-item-description-${props.index}`, children: description }) : null
      ]
    }
  );
  const bulletComponent = /* @__PURE__ */ jsx(
    Box,
    __spreadProps(__spreadValues({
      display: "grid",
      h: bulletSize,
      w: bulletSize,
      lineHeight: bulletSize,
      textAlign: "center",
      alignContent: "center",
      borderRadius: "50%",
      borderWidth: "2px",
      fontSize: "sm",
      fontWeight: "bold",
      userSelect: "none"
    }, style), {
      children: status === "complete" ? /* @__PURE__ */ jsx(Icon, { as: MdCheck, style: { margin: "0 auto" }, w: 6, h: 6 }) : index + 1
    })
  );
  const trackComponent = showTrack ? direction === "horizontal" ? /* @__PURE__ */ jsx(
    chakra.div,
    {
      height: "2px",
      width: gap,
      background: status === "complete" ? selectedColor : trackColor
    }
  ) : /* @__PURE__ */ jsx(
    chakra.div,
    {
      left: "calc(1rem - 1px)",
      width: "2px",
      height: gap,
      background: status === "complete" ? selectedColor : trackColor
    }
  ) : null;
  return /* @__PURE__ */ jsx(
    Stack,
    {
      direction: trackDirection,
      alignItems: direction === "horizontal" ? "center" : void 0,
      onClick: () => onClick && onClick(index),
      width: "max-content",
      children: isTextVisible ? /* @__PURE__ */ jsxs(Stack, { direction: textDirection, children: [
        /* @__PURE__ */ jsxs(Stack, { direction: trackDirection, alignItems: "center", spacing: 0, children: [
          bulletComponent,
          trackComponent
        ] }),
        textComponent
      ] }) : /* @__PURE__ */ jsxs(Stack, { direction: trackDirection, alignItems: "center", spacing: 0, children: [
        /* @__PURE__ */ jsx(Tooltip, { "data-testid": `steps-item-tooltip-${index}`, label: name, placement: "bottom", hasArrow: true, children: bulletComponent }),
        trackComponent
      ] })
    }
  );
}

export { StepsItem as default };
//# sourceMappingURL=StepsItem.js.map
