'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var cls = require('classnames');
var Steps_tokens = require('../../Steps.tokens.js');
var StepItem_styles = require('./StepItem.styles.js');
var base = require('./variations/_view/base.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var cls__default = /*#__PURE__*/_interopDefault(cls);

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 = React.useState(false),
      _useState2 = _rollupPluginBabelHelpers.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 ? StepItem_styles.BulletIndicator : StepItem_styles.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.default.createElement(StepItem_styles.SpinnerStyled, {
      hasIndicator: hasIndicator
    }) : /*#__PURE__*/React__default.default.createElement(BulletNode, {
      className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.active, isActive), Steps_tokens.classes.inactive, isInactive)),
      disabled: isDisabled
    }, typeof indicator === 'function' ? indicator({
      status: status,
      item: item,
      size: size
    }) : indicator);
    React.useEffect(function () {
      if (isDisabled) {
        setIsHovered(false);
      }
    }, [isDisabled]);
    return /*#__PURE__*/React__default.default.createElement(Root, {
      view: completedItemView,
      className: cls__default.default(Steps_tokens.classes.stepItem, (_cls2 = {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_cls2, Steps_tokens.classes.simple, isSimple), Steps_tokens.classes.active, isActive), Steps_tokens.classes.hovered, isHovered && !isActive), Steps_tokens.classes.inactive, isInactive), Steps_tokens.classes.centered, isCentered), Steps_tokens.classes.disabled, isDisabled), Steps_tokens.classes.clickable, clickable && !isActive), Steps_tokens.classes.hasIndicator, hasIndicator), Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.verticalLastItem, isVertical && isLast), _rollupPluginBabelHelpers.defineProperty(_cls2, "isNextActive", isNextActive))),
      style: customSizeStyle
    }, /*#__PURE__*/React__default.default.createElement(StepItem_styles.BulletIndicatorWrapper, _rollupPluginBabelHelpers.extends({
      className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.simple, isSimple), Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.centered, isCentered), Steps_tokens.classes.hasIndicator, hasIndicator))
    }, interactiveHandlers), contentAlign === 'center' && /*#__PURE__*/React__default.default.createElement(Root, {
      view: prevCompletedView,
      style: {
        display: 'inline-block'
      }
    }, /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemCenteredDivider, {
      className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.transparentDivider, !hasLine || isFirst), Steps_tokens.classes.inactive, isInactive || isPrevInactive), Steps_tokens.classes.prevCompleted, isPrevCompleted && isActive), Steps_tokens.classes.activeItem, isActive))
    })), /*#__PURE__*/React__default.default.createElement(StepItem_styles.BulletSlot, null, bulletContent), /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemDivider, {
      className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.transparentDivider, !hasLine || isLast), Steps_tokens.classes.inactive, isInactive || isNextInactive), Steps_tokens.classes.nextActive, isNextActive && !isInactive), Steps_tokens.classes.activeItem, isActive))
    })), !isSimple && /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemContentWrapper, {
      className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.centered, isCentered), Steps_tokens.classes.active, isActive), Steps_tokens.classes.hasIndicator, hasIndicator), Steps_tokens.classes.noTitle, !title))
    }, /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemTitle, interactiveHandlers, title), content && /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content)));
  };
};
var stepItemConfig = {
  name: 'StepItem',
  tag: 'div',
  layout: stepItemRoot,
  base: StepItem_styles.base,
  variations: {
    view: base.base
  },
  defaults: {
    view: 'default'
  }
};

exports.stepItemConfig = stepItemConfig;
exports.stepItemRoot = stepItemRoot;
