import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import "core-js/modules/es.array.from.js";
import "core-js/modules/es.array.map.js";
import "core-js/modules/es.string.iterator.js";
import * as React from 'react';
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
import StepperItem, { STEPPER_ITEM_THEME_ENUM, STEPPER_ITEM_VIEW_ENUM } from "./StepperItem";
import "./Stepper.css";
var CheckedIcon = function CheckedIcon(props) {
  return /*#__PURE__*/React.createElement("svg", _extends({
    viewBox: "0 0 20 20"
  }, props), /*#__PURE__*/React.createElement("path", {
    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
  }));
};
var cn = cnCreate('mfui-stepper');
var Stepper = function Stepper(_ref) {
  var className = _ref.className,
    _ref$classes = _ref.classes,
    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
    rootClassName = _ref$classes2.root,
    itemsWrapClassName = _ref$classes2.itemsWrap,
    itemClassName = _ref$classes2.item,
    itemIconButtonClassName = _ref$classes2.itemIconButton,
    itemTitleClassName = _ref$classes2.itemTitle,
    itemTextClassname = _ref$classes2.itemText,
    itemLinkClassName = _ref$classes2.itemLink,
    rootRef = _ref.rootRef,
    _ref$activeStep = _ref.activeStep,
    activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
    _ref$stepCount = _ref.stepCount,
    stepCount = _ref$stepCount === void 0 ? 2 : _ref$stepCount,
    _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    _ref$isHorizontal = _ref.isHorizontal,
    isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
    isNumeric = _ref.isNumeric,
    isDisabled = _ref.isDisabled,
    isAllChecked = _ref.isAllChecked,
    _ref$showActiveStepCo = _ref.showActiveStepContent,
    showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
    _ref$align = _ref.align,
    align = _ref$align === void 0 ? 'center' : _ref$align,
    _ref$dataAttrs = _ref.dataAttrs,
    _ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
    rootAttrs = _ref$dataAttrs2.root,
    itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
    itemAttrs = _ref$dataAttrs2.item,
    itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
    itemTitleAttrs = _ref$dataAttrs2.itemTitle,
    itemTextAttrs = _ref$dataAttrs2.itemText,
    itemLinkAttrs = _ref$dataAttrs2.itemLink,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {
      return null;
    } : _ref$onChange;
  var _React$useState = React.useState(activeStep),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    currentIndex = _React$useState2[0],
    setCurrentIndex = _React$useState2[1];
  var hasCustomItems = !!items.length;
  var isHorizontalContent = isHorizontal || showActiveStepContent;
  var currentItems = hasCustomItems ? items : Array.from({
    length: stepCount
  });
  var isCorrectDisabled = React.useMemo(function () {
    return !!isAllChecked || !!isDisabled;
  }, [isAllChecked, isDisabled]);
  var defineItemTheme = React.useCallback(function (index) {
    switch (true) {
      case isAllChecked:
      case index < currentIndex:
        {
          return STEPPER_ITEM_THEME_ENUM.CHECKED;
        }
      case index === currentIndex:
        {
          return STEPPER_ITEM_THEME_ENUM.ACTIVE;
        }
      default:
        {
          return STEPPER_ITEM_THEME_ENUM.DEFAULT;
        }
    }
  }, [currentIndex, isAllChecked]);
  var handleClickItem = React.useCallback(function (index) {
    return function () {
      if (isCorrectDisabled) {
        return;
      }
      setCurrentIndex(index);
      onChange(index);
    };
  }, [isCorrectDisabled, onChange]);
  React.useEffect(function () {
    if (activeStep === undefined) {
      return;
    }
    setCurrentIndex(activeStep);
  }, [activeStep]);
  var renderIcon = React.useCallback(function (index, theme) {
    var isChecked = theme === STEPPER_ITEM_THEME_ENUM.CHECKED;
    if (isNumeric || !isChecked) {
      return index + 1;
    }
    return /*#__PURE__*/React.createElement(CheckedIcon, null);
  }, [isNumeric]);
  var renderItem = React.useCallback(function (props, index) {
    return /*#__PURE__*/React.createElement(StepperItem, _extends({}, props, {
      key: index,
      className: itemClassName,
      classes: {
        iconButton: itemIconButtonClassName,
        title: itemTitleClassName,
        text: itemTextClassname,
        link: itemLinkClassName
      },
      dataAttrs: {
        root: itemAttrs,
        iconButton: itemIconButtonAttrs,
        title: itemTitleAttrs,
        text: itemTextAttrs,
        link: itemLinkAttrs
      }
    }));
  }, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
  var renderItems = React.useMemo(function () {
    return currentItems.map(function (elem, i) {
      var item = elem || {};
      var itemTheme = defineItemTheme(i);
      var itemIcon = item.icon || renderIcon(i, itemTheme);
      return renderItem(_extends(_extends({}, item), {
        icon: itemIcon,
        hasSeparator: i < currentItems.length - 1,
        isHorizontal: isHorizontalContent,
        isDisabled: isCorrectDisabled,
        align: align,
        theme: itemTheme,
        view: showActiveStepContent ? STEPPER_ITEM_VIEW_ENUM.ICON : STEPPER_ITEM_VIEW_ENUM.DEFAULT,
        onClick: handleClickItem(i)
      }), i);
    });
  }, [align, currentItems, isCorrectDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
  var renderSingleItem = renderItem(_extends(_extends({}, currentItems[currentIndex]), {
    isDisabled: isCorrectDisabled,
    align: align,
    view: STEPPER_ITEM_VIEW_ENUM.CONTENT
  }));
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
    className: cn([className, rootClassName], {
      'is-horizontal': isHorizontalContent
    }),
    ref: rootRef
  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(itemsWrapAttrs), {
    className: cn('items-wrap', [itemsWrapClassName])
  }), renderItems), showActiveStepContent && renderSingleItem);
};
export default Stepper;