import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { TabPanel } from './TabPanel';
import { TabItem } from './TabItem';
import { Icon } from './Icon';
import { Block } from './Block';
export var WizardNavbar =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(WizardNavbar, _React$Component);

  function WizardNavbar() {
    return _React$Component.apply(this, arguments) || this;
  }

  var _proto = WizardNavbar.prototype;

  _proto.render = function render() {
    var _this = this;

    var currentStepIndex = this.context.wizard.getCurrentStepIndex();
    var maxVisitedStepIndex = this.context.wizard.getMaxVisitedStepIndex();
    return React.createElement(Block, {
      cancelBottomOffset: true
    }, React.createElement(TabPanel, {
      centered: true,
      noBorder: true
    }, this.context.wizard.getSteps().filter(function (step) {
      return !step.props.skipNavbarItem;
    }).map(function (step, index) {
      var isPassed = index < currentStepIndex;
      var isCurrent = index === currentStepIndex;
      var isBlocked = step.props.disabled || index > maxVisitedStepIndex;
      return React.createElement(TabItem, {
        key: 'wizardStep-' + step.props.id,
        testAutomationId: step.props.id,
        active: isCurrent,
        disabled: isBlocked,
        className: classnames({
          success: isPassed
        }),
        onSelect: function onSelect() {
          return _this.context.wizard.goToStep(step.props.id);
        }
      }, isPassed ? React.createElement(Icon, {
        name: "checkbox-selected-readonly"
      }) : React.createElement("strong", null, index + 1), step.props.tabText || step.props.title);
    })));
  };

  return WizardNavbar;
}(React.Component);

_defineProperty(WizardNavbar, "contextTypes", {
  wizard: PropTypes.object.isRequired
});