import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { forwardRef, useState, useMemo, useEffect } from 'react';
import cls from 'classnames';
import { classes } from './Steps.tokens.js';
import { base } from './Steps.styles.js';
import { base as base$1 } from './variations/_size/base.js';
import { base as base$2 } from './variations/_view/base.js';
import { base as base$3 } from './variations/_itemView/base.js';
import { getItemStatus } from './utils/getItemStatus.js';

var _excluded = ["view", "itemView", "size", "orientation", "contentAlign", "hasLine", "hasContent", "hasLoader", "items", "onChange", "current", "status"];
var stepsRoot = function stepsRoot(StepItem) {
  return function (Root) {
    return /*#__PURE__*/forwardRef(function (props, outerRef) {
      var _props$view = props.view,
        view = _props$view === void 0 ? 'default' : _props$view,
        _props$itemView = props.itemView,
        itemView = _props$itemView === void 0 ? 'default' : _props$itemView,
        size = props.size,
        _props$orientation = props.orientation,
        orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
        _props$contentAlign = props.contentAlign,
        contentAlign = _props$contentAlign === void 0 ? 'left' : _props$contentAlign,
        _props$hasLine = props.hasLine,
        hasLine = _props$hasLine === void 0 ? true : _props$hasLine,
        _props$hasContent = props.hasContent,
        hasContent = _props$hasContent === void 0 ? 'all' : _props$hasContent,
        hasLoader = props.hasLoader,
        _props$items = props.items,
        items = _props$items === void 0 ? [] : _props$items,
        onChange = props.onChange,
        current = props.current,
        status = props.status,
        rest = _objectWithoutProperties(props, _excluded);
      var _useState = useState(),
        _useState2 = _slicedToArray(_useState, 2),
        prevIndex = _useState2[0],
        setPrevIndex = _useState2[1];
      var hasIndicator = items.some(function (item) {
        return item.indicator != null;
      });
      var isSimple = items.every(function (item) {
        return !item.title && !item.content;
      });
      var innerItems = useMemo(function () {
        var isUncontrolled = current !== undefined;
        return items.map(function (item, index) {
          var itemStatus = getItemStatus({
            isUncontrolled: isUncontrolled,
            current: current,
            status: status,
            index: index,
            item: item
          });
          return _objectSpread2(_objectSpread2({}, item), {}, {
            status: itemStatus
          });
        });
      }, [status, current, items]);
      useEffect(function () {
        var calcPrevIndex = function calcPrevIndex() {
          if (current !== undefined) {
            setPrevIndex(current);
          } else {
            var index = innerItems.findIndex(function (item) {
              return item.status === 'active';
            });
            setPrevIndex(index !== -1 ? index : undefined);
          }
        };
        calcPrevIndex();
        return function () {
          calcPrevIndex();
        };
      }, [current, innerItems]);
      return /*#__PURE__*/React__default.createElement(Root, _extends({
        size: size,
        view: view,
        itemView: itemView,
        ref: outerRef,
        className: cls(_defineProperty(_defineProperty(_defineProperty({}, classes.verticalOrientation, orientation === 'vertical'), classes.simple, isSimple), classes.hasIndicator, hasIndicator))
      }, rest), innerItems.map(function (item, index) {
        var isActive = item.status === 'active';
        var itemContent = hasContent === 'active' && !isActive || hasContent === 'none' ? '' : item.content;
        var itemContentAlign = orientation === 'horizontal' ? contentAlign : 'left';
        var onClick = onChange ? function () {
          return onChange(item, index, prevIndex);
        } : undefined;
        return /*#__PURE__*/React__default.createElement(StepItem, {
          key: index,
          index: index,
          title: item.title,
          content: itemContent,
          indicator: item.indicator,
          status: item.status,
          size: size,
          orientation: orientation,
          contentAlign: itemContentAlign,
          hasLine: hasLine,
          hasLoader: hasLoader && isActive,
          onClick: onClick,
          items: innerItems,
          rootView: view,
          height: item.height,
          width: item.width
        });
      }));
    });
  };
};
var stepsConfig = function stepsConfig(StepItem) {
  return {
    name: 'Steps',
    tag: 'div',
    layout: stepsRoot(StepItem),
    base: base,
    variations: {
      size: base$1,
      view: base$2,
      itemView: base$3
    },
    defaults: {
      view: 'default',
      size: 'm',
      itemView: 'default'
    }
  };
};

export { stepsConfig, stepsRoot };
