function _array_like_to_array(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
    return arr2;
}
function _array_with_holes(arr) {
    if (Array.isArray(arr)) return arr;
}
function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
function _iterable_to_array_limit(arr, i) {
    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
    if (_i == null) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _s, _e;
    try {
        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
            _arr.push(_s.value);
            if (i && _arr.length === i) break;
        }
    } catch (err) {
        _d = true;
        _e = err;
    } finally{
        try {
            if (!_n && _i["return"] != null) _i["return"]();
        } finally{
            if (_d) throw _e;
        }
    }
    return _arr;
}
function _non_iterable_rest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _sliced_to_array(arr, i) {
    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _array_like_to_array(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
import React, { useState, useEffect } from "react";
import cls from "classnames";
import { classes, tokens } from "../../Steps.tokens";
import { Bullet, BulletIndicator, BulletIndicatorWrapper, StepItemContent, StepItemContentWrapper, StepItemDivider, StepItemStyled, StepItemTitle, SpinnerStyled } from "./StepItem.styles";
// todo попробовать заменить через baseline выравнивание
var indicatorSizesIndentsMap = {
    8: "var(".concat(tokens.smallBulletIndentHeight, ")"),
    16: "var(".concat(tokens.largeBulletIndentHeight, ")"),
    24: "var(".concat(tokens.smallIndicatorIndentHeight, ")"),
    36: "var(".concat(tokens.largeIndicatorIndentHeight, ")")
};
export var StepItem = function StepItem(param) {
    var index = param.index, title = param.title, content = param.content, indicator = param.indicator, _param_status = param.status, status = _param_status === void 0 ? 'inactive' : _param_status, size = param.size, orientation = param.orientation, contentAlign = param.contentAlign, hasLine = param.hasLine, hasLoader = param.hasLoader, onClick = param.onClick, items = param.items;
    var _useState = _sliced_to_array(useState(false), 2), isHovered = _useState[0], setIsHovered = _useState[1];
    var isFirst = index === 0;
    var isLast = index === items.length - 1;
    var prevItem = items[index - 1];
    var nextItem = items[index + 1];
    var isActive = status === 'active';
    var isNextActive = (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'active';
    var isInactive = status === 'inactive';
    var isPrevInactive = prevItem && !(prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
    var isNextInactive = !(nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
    var hasIndicator = indicator != null;
    var BulletNode = hasIndicator ? BulletIndicator : Bullet;
    var item = items[index];
    var isSimple = !title && !content;
    var clickable = Boolean(onClick);
    var isVertical = orientation === 'vertical';
    var isCentered = contentAlign === 'center';
    var isDisabled = item.disabled;
    var onClickHandler = onClick && !isDisabled ? function() {
        return onClick(item, index);
    } : undefined;
    var resultIndicatorSize;
    if (hasIndicator) {
        resultIndicatorSize = isActive ? 36 : 24;
    } else {
        resultIndicatorSize = isActive ? 16 : 8;
    }
    var indentToken = indicatorSizesIndentsMap[resultIndicatorSize];
    // todo заменить на callback с условиями внутри
    var onMouseOver = clickable && !isDisabled ? function() {
        if (isDisabled) {
            setIsHovered(false);
        }
        setIsHovered(true);
    } : undefined;
    var onMouseOut = clickable && !isDisabled ? function() {
        setIsHovered(false);
    } : undefined;
    useEffect(function() {
        if (isDisabled) {
            setIsHovered(false);
        }
    }, [
        isDisabled
    ]);
    if (isSimple) {
        var _obj, _obj1, _obj2, _obj3;
        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StepItemStyled, {
            className: cls((_obj = {}, _define_property(_obj, classes.simple, isSimple), _define_property(_obj, classes.active, isActive), _define_property(_obj, classes.hovered, isHovered && !isActive), _define_property(_obj, classes.inactive, isInactive), _define_property(_obj, classes.centered, isCentered), _define_property(_obj, classes.disabled, isDisabled), _define_property(_obj, classes.clickable, clickable && !isActive), _define_property(_obj, classes.hasIndicator, hasIndicator), _define_property(_obj, classes.transparentDivider, !hasLine), _define_property(_obj, classes.verticalOrientation, isVertical), _define_property(_obj, "isFirst", isFirst), _define_property(_obj, "isLast", isLast), _define_property(_obj, "isPrevInactive", isPrevInactive), _define_property(_obj, "isNextInactive", isNextInactive), _obj))
        }, /*#__PURE__*/ React.createElement(BulletIndicatorWrapper, {
            className: cls((_obj1 = {}, _define_property(_obj1, classes.verticalOrientation, isVertical), _define_property(_obj1, classes.centered, isCentered), _define_property(_obj1, classes.simple, isSimple), _define_property(_obj1, classes.hasIndicator, hasIndicator), _obj1)),
            onClick: onClickHandler,
            onFocus: onMouseOver,
            onBlur: onMouseOut,
            onMouseOver: onMouseOver,
            onMouseOut: onMouseOut
        }, hasLoader && /*#__PURE__*/ React.createElement(SpinnerStyled, {
            hasIndicator: hasIndicator
        }), !hasLoader && /*#__PURE__*/ React.createElement(BulletNode, {
            className: cls((_obj2 = {}, _define_property(_obj2, classes.active, isActive), _define_property(_obj2, classes.inactive, isInactive), _obj2)),
            disabled: isDisabled
        }, typeof indicator === 'function' && indicator({
            status: status,
            item: item,
            size: size
        }), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/ React.createElement(StepItemDivider, {
            className: cls(classes.simple, (_obj3 = {}, _define_property(_obj3, classes.verticalOrientation, isVertical), _define_property(_obj3, classes.transparentDivider, !hasLine), _define_property(_obj3, classes.active, isActive), _define_property(_obj3, classes.inactive, isInactive || isNextInactive), _define_property(_obj3, classes.nextActive, isNextActive), _define_property(_obj3, classes.disabled, isDisabled), _obj3))
        }));
    }
    var _obj4, _obj5, _obj6, _obj7, _obj8, _obj9, _obj10;
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(StepItemStyled, {
        className: cls((_obj4 = {}, _define_property(_obj4, classes.simple, isSimple), _define_property(_obj4, classes.active, isActive), _define_property(_obj4, classes.hovered, isHovered && !isActive), _define_property(_obj4, classes.inactive, isInactive), _define_property(_obj4, classes.centered, isCentered), _define_property(_obj4, classes.disabled, isDisabled), _define_property(_obj4, classes.clickable, clickable && !isActive), _define_property(_obj4, classes.hasIndicator, hasIndicator), _define_property(_obj4, classes.verticalOrientation, isVertical), _define_property(_obj4, "isNextActive", isNextActive), _obj4))
    }, /*#__PURE__*/ React.createElement(BulletIndicatorWrapper, {
        className: cls((_obj5 = {}, _define_property(_obj5, classes.verticalOrientation, isVertical), _define_property(_obj5, classes.centered, isCentered), _define_property(_obj5, classes.simple, isSimple), _define_property(_obj5, classes.hasIndicator, hasIndicator), _obj5)),
        onClick: onClickHandler,
        onFocus: onMouseOver,
        onBlur: onMouseOut,
        onMouseOver: onMouseOver,
        onMouseOut: onMouseOut
    }, contentAlign === 'center' && !isSimple && /*#__PURE__*/ React.createElement(StepItemDivider, {
        className: cls((_obj6 = {}, _define_property(_obj6, classes.simple, isSimple), _define_property(_obj6, classes.verticalOrientation, isVertical), _define_property(_obj6, classes.transparentDivider, !hasLine || isFirst), _define_property(_obj6, classes.inactive, isInactive || isPrevInactive), _define_property(_obj6, classes.nextActive, isNextActive), _obj6))
    }), isVertical && /*#__PURE__*/ React.createElement(StepItemDivider, {
        className: cls(classes.indentDivider, (_obj7 = {}, _define_property(_obj7, classes.verticalOrientation, isVertical), _define_property(_obj7, classes.simple, isSimple), _define_property(_obj7, classes.transparentDivider, !hasLine || isFirst), _define_property(_obj7, classes.inactive, isInactive || isPrevInactive), _define_property(_obj7, classes.active, isActive), _define_property(_obj7, classes.nextActive, isNextActive), _obj7)),
        indentToken: indentToken
    }), hasLoader && /*#__PURE__*/ React.createElement(SpinnerStyled, {
        hasIndicator: hasIndicator
    }), !hasLoader && /*#__PURE__*/ React.createElement(BulletNode, {
        className: cls((_obj8 = {}, _define_property(_obj8, classes.active, isActive), _define_property(_obj8, classes.inactive, isInactive), _obj8)),
        disabled: isDisabled
    }, typeof indicator === 'function' && indicator({
        status: status,
        item: item,
        size: size
    }), typeof indicator !== 'function' && indicator), /*#__PURE__*/ React.createElement(StepItemDivider, {
        className: cls((_obj9 = {}, _define_property(_obj9, classes.simple, isSimple), _define_property(_obj9, classes.verticalOrientation, isVertical), _define_property(_obj9, classes.transparentDivider, !hasLine || isLast), _define_property(_obj9, classes.inactive, isInactive || isNextInactive), _define_property(_obj9, classes.nextActive, isNextActive), _obj9))
    })), /*#__PURE__*/ React.createElement(StepItemContentWrapper, {
        className: cls((_obj10 = {}, _define_property(_obj10, classes.verticalOrientation, isVertical), _define_property(_obj10, classes.centered, isCentered), _define_property(_obj10, classes.active, isActive), _define_property(_obj10, classes.hasIndicator, hasIndicator), _obj10))
    }, /*#__PURE__*/ React.createElement(StepItemTitle, {
        onClick: onClickHandler,
        onFocus: onMouseOver,
        onBlur: onMouseOut,
        onMouseOver: onMouseOver,
        onMouseOut: onMouseOut
    }, title), content && /*#__PURE__*/ React.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
};
