"use strict";
// The require scope
var __webpack_require__ = {};
/************************************************************************/ // webpack/runtime/compat_get_default_export
(()=>{
    // getDefaultExport function for compatibility with non-ESM modules
    __webpack_require__.n = function(module) {
        var getter = module && module.__esModule ? function() {
            return module['default'];
        } : function() {
            return module;
        };
        __webpack_require__.d(getter, {
            a: getter
        });
        return getter;
    };
})();
// webpack/runtime/define_property_getters
(()=>{
    __webpack_require__.d = function(exports1, definition) {
        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
            enumerable: true,
            get: definition[key]
        });
    };
})();
// webpack/runtime/has_own_property
(()=>{
    __webpack_require__.o = function(obj, prop) {
        return Object.prototype.hasOwnProperty.call(obj, prop);
    };
})();
// webpack/runtime/make_namespace_object
(()=>{
    // define __esModule on exports
    __webpack_require__.r = function(exports1) {
        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
            value: 'Module'
        });
        Object.defineProperty(exports1, '__esModule', {
            value: true
        });
    };
})();
/************************************************************************/ var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
    default: ()=>/* binding */ StepsItem_rslib_entry_
});
const external_react_namespaceObject = require("react");
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
const react_namespaceObject = require("@chakra-ui/react");
const md_namespaceObject = require("react-icons/md");
function StepsItem(props) {
    const selectedColor = (0, react_namespaceObject.useColorModeValue)('darkblue.800', 'white');
    const trackColor = (0, react_namespaceObject.useColorModeValue)('blackAlpha.400', 'whiteAlpha.500');
    const textColor = (0, react_namespaceObject.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__*/ external_react_default().createElement(react_namespaceObject.Box, {
        position: "relative",
        top: 'horizontal' === direction ? 0 : '0.25rem',
        left: 'horizontal' === direction ? 0 : '0.25rem'
    }, 'string' == typeof name ? /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Text, {
        fontWeight: "medium",
        "data-testid": `steps-item-name-${props.index}`
    }, name) : name, description ? 'string' == typeof description ? /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Text, {
        opacity: "0.8",
        "data-testid": `steps-item-description-${props.index}`
    }, description) : description : null);
    const bulletComponent = /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.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__*/ external_react_default().createElement(react_namespaceObject.Icon, {
        as: md_namespaceObject.MdCheck,
        style: {
            margin: '0 auto'
        },
        w: 6,
        h: 6
    }) : index + 1);
    const trackComponent = showTrack ? 'horizontal' === direction ? /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.chakra.div, {
        height: "2px",
        width: gap,
        background: 'complete' === status ? selectedColor : trackColor
    }) : /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.chakra.div, {
        left: "calc(1rem - 1px)",
        width: "2px",
        height: gap,
        background: 'complete' === status ? selectedColor : trackColor
    }) : null;
    return /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Stack, {
        direction: trackDirection,
        alignItems: 'horizontal' === direction ? 'center' : void 0,
        onClick: ()=>onClick && onClick(index),
        width: "max-content"
    }, isTextVisible ? /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Stack, {
        direction: textDirection
    }, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Stack, {
        direction: trackDirection,
        alignItems: "center",
        spacing: 0
    }, bulletComponent, trackComponent), textComponent) : /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Stack, {
        direction: trackDirection,
        alignItems: "center",
        spacing: 0
    }, /*#__PURE__*/ external_react_default().createElement(react_namespaceObject.Tooltip, {
        "data-testid": `steps-item-tooltip-${index}`,
        label: name,
        placement: "bottom",
        hasArrow: true
    }, bulletComponent), trackComponent));
}
/* ESM default export */ const StepsItem_rslib_entry_ = StepsItem;
var __webpack_export_target__ = exports;
for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
    value: true
});
