"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Step = void 0;
var _StepLink = _interopRequireDefault(require("./StepLink"));
var _SubStep = _interopRequireDefault(require("./SubStep"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Icons = require("../Icons");
var _jsxRuntime = require("preact/compat/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Step = _ref => {
  let {
    step,
    ...props
  } = _ref;
  const Heading = `h${step.headingLevel || '2'}`;
  const start = step.isNextStep;
  const resume = step.started && !step.completed;
  const className = (0, _classnames.default)('ds-c-step', {
    'ds-c-step--current': start || resume,
    'ds-c-step--completed': step.completed
  });
  const contentClassName = (0, _classnames.default)('ds-c-step__content', {
    'ds-c-step__content--with-content': step.description || step.steps
  });
  let linkLabel;
  if (step.completed && !step.steps) {
    linkLabel = step.linkText || props.editText;
  } else if (start) {
    linkLabel = step.linkText || props.startText;
  } else if (resume) {
    linkLabel = step.linkText || props.resumeText;
  }
  let linkClassName;
  if (start || resume) {
    linkClassName = 'ds-c-button ds-c-button--solid ds-c-button--main ds-c-button--on-light';
  }

  // TODO: make heading required after removing title
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
    role: "listitem",
    className: className,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: contentClassName,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
        className: "ds-c-step__heading",
        children: step.heading
      }), step.description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "ds-c-step__description",
        role: "region",
        children: step.description
      }), step.steps && /*#__PURE__*/(0, _jsxRuntime.jsx)("ol", {
        role: "list",
        className: "ds-c-step__substeps",
        children: step.steps.map((s, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubStep.default, {
          step: {
            ...s,
            ...{
              component: step.component || s.component
            }
          },
          ...props
        }, s.id || i))
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "ds-c-step__actions",
      role: "region",
      children: [step.completed && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "ds-c-step__completed-text",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.CheckIcon, {
          className: "ds-c-icon-color--success"
        }), props.completedText]
      }), linkLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepLink.default, {
        component: step.component,
        href: step.href,
        stepId: step.id,
        screenReaderText: step.heading,
        onClick: step.onClick || props.onStepLinkClick,
        className: linkClassName,
        children: linkLabel
      })]
    })]
  });
};
exports.Step = Step;
var _default = exports.default = Step;