import _extends from "@babel/runtime/helpers/extends";
import "core-js/modules/es.string.link.js";
import * as React from 'react';
import { Button, Header, Paragraph } from '@megafon/ui-core';
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
import "./StepperItem.css";
export var STEPPER_ITEM_THEME_ENUM;
(function (STEPPER_ITEM_THEME_ENUM) {
  STEPPER_ITEM_THEME_ENUM["CHECKED"] = "checked";
  STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
  STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
})(STEPPER_ITEM_THEME_ENUM || (STEPPER_ITEM_THEME_ENUM = {}));
export var STEPPER_ITEM_VIEW_ENUM;
(function (STEPPER_ITEM_VIEW_ENUM) {
  STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
  STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
  STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
})(STEPPER_ITEM_VIEW_ENUM || (STEPPER_ITEM_VIEW_ENUM = {}));
var cn = cnCreate('mfui-stepper-item');
var StepperItem = function StepperItem(_ref) {
  var className = _ref.className,
    _ref$classes = _ref.classes,
    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
    iconButtonClassName = _ref$classes2.iconButton,
    titleClassName = _ref$classes2.title,
    textClassName = _ref$classes2.text,
    linkClassName = _ref$classes2.link,
    _ref$theme = _ref.theme,
    theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
    title = _ref.title,
    text = _ref.text,
    linkText = _ref.linkText,
    linkUrl = _ref.linkUrl,
    icon = _ref.icon,
    hasSeparator = _ref.hasSeparator,
    _ref$isHorizontal = _ref.isHorizontal,
    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
    isDisabled = _ref.isDisabled,
    _ref$align = _ref.align,
    align = _ref$align === void 0 ? 'center' : _ref$align,
    _ref$view = _ref.view,
    view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
    _ref$dataAttrs = _ref.dataAttrs,
    _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
    rootAttrs = _ref$dataAttrs2.root,
    iconButtonAttrs = _ref$dataAttrs2.iconButton,
    titleAttrs = _ref$dataAttrs2.title,
    textAttrs = _ref$dataAttrs2.text,
    linkAttrs = _ref$dataAttrs2.link,
    onClick = _ref.onClick;
  var hasLink = !!linkText && !!linkUrl;
  var hasContent = !!title || !!text || hasLink;
  var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
  var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
  var renderContent = /*#__PURE__*/React.createElement("div", {
    className: cn('content')
  }, title && /*#__PURE__*/React.createElement(Header, {
    className: cn([titleClassName]),
    dataAttrs: {
      root: titleAttrs
    },
    as: "h5",
    align: align
  }, title), text && /*#__PURE__*/React.createElement(Paragraph, {
    className: cn([textClassName]),
    dataAttrs: {
      root: textAttrs
    },
    hasMargin: false,
    align: align
  }, text), hasLink && /*#__PURE__*/React.createElement(Button, {
    className: cn('link', [linkClassName]),
    dataAttrs: {
      root: linkAttrs
    },
    href: linkUrl,
    type: "text",
    sizeAll: "extra-small"
  }, linkText));
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
    className: cn([className], {
      theme: theme,
      align: align,
      'is-horizontal': isHorizontal
    })
  }), showIcon && /*#__PURE__*/React.createElement("div", {
    className: cn('icon-button-area')
  }, /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(iconButtonAttrs), {
    className: cn('icon-button', [iconButtonClassName]),
    type: "button",
    disabled: isDisabled,
    onClick: onClick
  }), /*#__PURE__*/React.createElement("span", {
    className: cn('icon')
  }, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
    className: cn('separator')
  })), showContent && renderContent);
};
export default StepperItem;