'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');

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

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

// todo попробовать заменить через baseline выравнивание
var indicatorSizesIndentsMap = {
  8: /*#__PURE__*/"var(".concat(Steps_tokens.tokens.smallBulletIndentHeight, ")"),
  16: /*#__PURE__*/"var(".concat(Steps_tokens.tokens.largeBulletIndentHeight, ")"),
  24: /*#__PURE__*/"var(".concat(Steps_tokens.tokens.smallIndicatorIndentHeight, ")"),
  36: /*#__PURE__*/"var(".concat(Steps_tokens.tokens.largeIndicatorIndentHeight, ")")
};
var StepItem = function StepItem(_ref) {
  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;
  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 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 && prevItem.status) || (prevItem === null || prevItem === void 0 ? void 0 : prevItem.status) === 'inactive';
  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 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;
  React.useEffect(function () {
    if (isDisabled) {
      setIsHovered(false);
    }
  }, [isDisabled]);
  if (isSimple) {
    var _cls;
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemStyled, {
      className: cls__default.default((_cls = {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_cls, 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.transparentDivider, !hasLine), Steps_tokens.classes.verticalOrientation, isVertical), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_cls, "isFirst", isFirst), "isLast", isLast), "isPrevInactive", isPrevInactive), "isNextInactive", isNextInactive)))
    }, /*#__PURE__*/React__default.default.createElement(StepItem_styles.BulletIndicatorWrapper, {
      className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.centered, isCentered), Steps_tokens.classes.simple, isSimple), Steps_tokens.classes.hasIndicator, hasIndicator)),
      onClick: onClickHandler,
      onFocus: onMouseOver,
      onBlur: onMouseOut,
      onMouseOver: onMouseOver,
      onMouseOut: onMouseOut
    }, hasLoader && /*#__PURE__*/React__default.default.createElement(StepItem_styles.SpinnerStyled, {
      hasIndicator: hasIndicator
    }), !hasLoader && /*#__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
    }), typeof indicator !== 'function' && indicator))), !isLast && /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemDivider, {
      className: cls__default.default(Steps_tokens.classes.simple, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.transparentDivider, !hasLine), Steps_tokens.classes.active, isActive), Steps_tokens.classes.inactive, isInactive || isNextInactive), Steps_tokens.classes.nextActive, isNextActive), Steps_tokens.classes.disabled, isDisabled))
    }));
  }
  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemStyled, {
    className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, 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), "isNextActive", isNextActive))
  }, /*#__PURE__*/React__default.default.createElement(StepItem_styles.BulletIndicatorWrapper, {
    className: cls__default.default(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.centered, isCentered), Steps_tokens.classes.simple, isSimple), Steps_tokens.classes.hasIndicator, hasIndicator)),
    onClick: onClickHandler,
    onFocus: onMouseOver,
    onBlur: onMouseOut,
    onMouseOver: onMouseOver,
    onMouseOut: onMouseOut
  }, contentAlign === 'center' && !isSimple && /*#__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.simple, isSimple), Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.transparentDivider, !hasLine || isFirst), Steps_tokens.classes.inactive, isInactive || isPrevInactive), Steps_tokens.classes.nextActive, isNextActive))
  }), isVertical && /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemDivider, {
    className: cls__default.default(Steps_tokens.classes.indentDivider, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.simple, isSimple), Steps_tokens.classes.transparentDivider, !hasLine || isFirst), Steps_tokens.classes.inactive, isInactive || isPrevInactive), Steps_tokens.classes.active, isActive), Steps_tokens.classes.nextActive, isNextActive)),
    indentToken: indentToken
  }), hasLoader && /*#__PURE__*/React__default.default.createElement(StepItem_styles.SpinnerStyled, {
    hasIndicator: hasIndicator
  }), !hasLoader && /*#__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
  }), typeof indicator !== 'function' && indicator), /*#__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.simple, isSimple), Steps_tokens.classes.verticalOrientation, isVertical), Steps_tokens.classes.transparentDivider, !hasLine || isLast), Steps_tokens.classes.inactive, isInactive || isNextInactive), Steps_tokens.classes.nextActive, isNextActive))
  })), /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemContentWrapper, {
    className: cls__default.default(_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))
  }, /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemTitle, {
    onClick: onClickHandler,
    onFocus: onMouseOver,
    onBlur: onMouseOut,
    onMouseOver: onMouseOver,
    onMouseOut: onMouseOut
  }, title), content && /*#__PURE__*/React__default.default.createElement(StepItem_styles.StepItemContent, null, typeof content === 'function' ? content(status, index, items) : content))));
};

exports.StepItem = StepItem;
//# sourceMappingURL=StepItem.js.map
