import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useEffect } from 'react';
import cls from 'classnames';
import { classes, tokens } from '../../Steps.tokens.js';
import { StepItemStyled, BulletIndicatorWrapper, SpinnerStyled, StepItemDivider, StepItemContentWrapper, StepItemTitle, StepItemContent, BulletIndicator, Bullet } from './StepItem.styles.js';

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

export { StepItem };
