import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useEffect } from 'react';
import cls from 'classnames';
import { classes } from '../../Steps.tokens.js';
import { SpinnerStyled, BulletIndicatorWrapper, StepItemCenteredDivider, BulletSlot, StepItemDivider, StepItemContentWrapper, StepItemTitle, StepItemContent, base, BulletIndicator, Bullet } from './StepItem.styles.js';
import { base as base$1 } from './variations/_view/base.js';

var stepItemRoot = function stepItemRoot(Root) {
  return function (_ref) {
    var _item$completedItemVi, _prevItem$completedIt, _cls2;
    var index = _ref.index,
      title = _ref.title,
      content = _ref.content,
      indicator = _ref.indicator,
      _ref$status = _ref.status,
      status = _ref$status === void 0 ? 'inactive' : _ref$status,
      size = _ref.size,
      orientation = _ref.orientation,
      contentAlign = _ref.contentAlign,
      hasLine = _ref.hasLine,
      hasLoader = _ref.hasLoader,
      onClick = _ref.onClick,
      items = _ref.items,
      rootView = _ref.rootView,
      height = _ref.height,
      width = _ref.width;
    var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isHovered = _useState2[0],
      setIsHovered = _useState2[1];
    var isFirst = index === 0;
    var isLast = index === items.length - 1;
    var item = items[index];
    var prevItem = items === null || items === void 0 ? void 0 : items[index - 1];
    var nextItem = items === null || items === void 0 ? void 0 : 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 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
    var isPrevCompleted = (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'completed';
    var isNextInactive = !(nextItem !== null && nextItem !== void 0 && nextItem.status) || (nextItem === null || nextItem === void 0 ? void 0 : nextItem.status) === 'inactive';
    var hasIndicator = indicator != null;
    var BulletNode = hasIndicator ? BulletIndicator : Bullet;
    var completedItemView = (_item$completedItemVi = item === null || item === void 0 ? void 0 : item.completedItemView) !== null && _item$completedItemVi !== void 0 ? _item$completedItemVi : rootView;
    var prevCompletedView = (_prevItem$completedIt = prevItem === null || prevItem === void 0 ? void 0 : prevItem.completedItemView) !== null && _prevItem$completedIt !== void 0 ? _prevItem$completedIt : rootView;
    var isSimple = !title && !content;
    var clickable = Boolean(onClick);
    var isVertical = orientation === 'vertical';
    var isCentered = contentAlign === 'center';
    var isDisabled = item === null || item === void 0 ? void 0 : item.disabled;
    var onClickHandler = onClick && !isDisabled ? function () {
      return onClick(item, index);
    } : undefined;
    var customSizeStyle = function () {
      if (isVertical && height) {
        return {
          height: height,
          flex: 'none'
        };
      }
      if (!isVertical && width) {
        return {
          width: width,
          flex: 'none'
        };
      }
      return undefined;
    }();
    var onMouseOver = clickable && !isDisabled ? function () {
      return setIsHovered(true);
    } : undefined;
    var onMouseOut = clickable && !isDisabled ? function () {
      return setIsHovered(false);
    } : undefined;
    var interactiveHandlers = {
      onClick: onClickHandler,
      onFocus: onMouseOver,
      onBlur: onMouseOut,
      onMouseOver: onMouseOver,
      onMouseOut: onMouseOut
    };
    var bulletContent = hasLoader ? /*#__PURE__*/React__default.createElement(SpinnerStyled, {
      hasIndicator: hasIndicator
    }) : /*#__PURE__*/React__default.createElement(BulletNode, {
      className: cls(_defineProperty(_defineProperty({}, classes.active, isActive), classes.inactive, isInactive)),
      disabled: isDisabled
    }, typeof indicator === 'function' ? indicator({
      status: status,
      item: item,
      size: size
    }) : indicator);
    useEffect(function () {
      if (isDisabled) {
        setIsHovered(false);
      }
    }, [isDisabled]);
    return /*#__PURE__*/React__default.createElement(Root, {
      view: completedItemView,
      className: cls(classes.stepItem, (_cls2 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_cls2, classes.simple, isSimple), classes.active, isActive), classes.hovered, isHovered && !isActive), classes.inactive, isInactive), classes.centered, isCentered), classes.disabled, isDisabled), classes.clickable, clickable && !isActive), classes.hasIndicator, hasIndicator), classes.verticalOrientation, isVertical), classes.verticalLastItem, isVertical && isLast), _defineProperty(_cls2, "isNextActive", isNextActive))),
      style: customSizeStyle
    }, /*#__PURE__*/React__default.createElement(BulletIndicatorWrapper, _extends({
      className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.simple, isSimple), classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.hasIndicator, hasIndicator))
    }, interactiveHandlers), contentAlign === 'center' && /*#__PURE__*/React__default.createElement(Root, {
      view: prevCompletedView,
      style: {
        display: 'inline-block'
      }
    }, /*#__PURE__*/React__default.createElement(StepItemCenteredDivider, {
      className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine || isFirst), classes.inactive, isInactive || isPrevInactive), classes.prevCompleted, isPrevCompleted && isActive), classes.activeItem, isActive))
    })), /*#__PURE__*/React__default.createElement(BulletSlot, null, bulletContent), /*#__PURE__*/React__default.createElement(StepItemDivider, {
      className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.transparentDivider, !hasLine || isLast), classes.inactive, isInactive || isNextInactive), classes.nextActive, isNextActive && !isInactive), classes.activeItem, isActive))
    })), !isSimple && /*#__PURE__*/React__default.createElement(StepItemContentWrapper, {
      className: cls(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, isVertical), classes.centered, isCentered), classes.active, isActive), classes.hasIndicator, hasIndicator), classes.noTitle, !title))
    }, /*#__PURE__*/React__default.createElement(StepItemTitle, interactiveHandlers, title), content && /*#__PURE__*/React__default.createElement(StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content)));
  };
};
var stepItemConfig = {
  name: 'StepItem',
  tag: 'div',
  layout: stepItemRoot,
  base: base,
  variations: {
    view: base$1
  },
  defaults: {
    view: 'default'
  }
};

export { stepItemConfig, stepItemRoot };
