import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__ from "@chakra-ui/react";
import * as __WEBPACK_EXTERNAL_MODULE_react_icons_md__ from "react-icons/md";
function StepsItem(props) {
    const selectedColor = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useColorModeValue)('darkblue.800', 'white');
    const trackColor = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useColorModeValue)('blackAlpha.400', 'whiteAlpha.500');
    const textColor = (0, __WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.useColorModeValue)('white', 'black');
    const { name, description, status, index, onClick, isTextVisible = false, direction = 'horizontal', gap, showTrack = false } = props;
    const trackDirection = 'vertical' !== direction ? 'row' : 'column';
    const textDirection = 'vertical' === direction ? '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__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        position: "relative",
        top: 'horizontal' === direction ? 0 : '0.25rem',
        left: 'horizontal' === direction ? 0 : '0.25rem'
    }, 'string' == typeof name ? /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
        fontWeight: "medium",
        "data-testid": `steps-item-name-${props.index}`
    }, name) : name, description ? 'string' == typeof description ? /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Text, {
        opacity: "0.8",
        "data-testid": `steps-item-description-${props.index}`
    }, description) : description : null);
    const bulletComponent = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Box, {
        display: "grid",
        h: bulletSize,
        w: bulletSize,
        lineHeight: bulletSize,
        textAlign: "center",
        alignContent: "center",
        borderRadius: "50%",
        borderWidth: "2px",
        fontSize: "sm",
        fontWeight: "bold",
        userSelect: "none",
        ...style
    }, 'complete' === status ? /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Icon, {
        as: __WEBPACK_EXTERNAL_MODULE_react_icons_md__.MdCheck,
        style: {
            margin: '0 auto'
        },
        w: 6,
        h: 6
    }) : index + 1);
    const trackComponent = showTrack ? 'horizontal' === direction ? /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.chakra.div, {
        height: "2px",
        width: gap,
        background: 'complete' === status ? selectedColor : trackColor
    }) : /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.chakra.div, {
        left: "calc(1rem - 1px)",
        width: "2px",
        height: gap,
        background: 'complete' === status ? selectedColor : trackColor
    }) : null;
    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
        direction: trackDirection,
        alignItems: 'horizontal' === direction ? 'center' : void 0,
        onClick: ()=>onClick && onClick(index),
        width: "max-content"
    }, isTextVisible ? /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
        direction: textDirection
    }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
        direction: trackDirection,
        alignItems: "center",
        spacing: 0
    }, bulletComponent, trackComponent), textComponent) : /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Stack, {
        direction: trackDirection,
        alignItems: "center",
        spacing: 0
    }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].createElement(__WEBPACK_EXTERNAL_MODULE__chakra_ui_react__.Tooltip, {
        "data-testid": `steps-item-tooltip-${index}`,
        label: name,
        placement: "bottom",
        hasArrow: true
    }, bulletComponent), trackComponent));
}
/* ESM default export */ const StepsItem_rslib_entry_ = StepsItem;
export { StepsItem_rslib_entry_ as default };
