import StepLink from './StepLink';
import SubStep from './SubStep';
import classNames from 'classnames';
import { CheckIcon } from '../Icons';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export 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 = classNames('ds-c-step', {
    'ds-c-step--current': start || resume,
    'ds-c-step--completed': step.completed
  });
  const contentClassName = classNames('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__*/_jsxs("li", {
    role: "listitem",
    className: className,
    children: [/*#__PURE__*/_jsxs("div", {
      className: contentClassName,
      children: [/*#__PURE__*/_jsx(Heading, {
        className: "ds-c-step__heading",
        children: step.heading
      }), step.description && /*#__PURE__*/_jsx("div", {
        className: "ds-c-step__description",
        role: "region",
        children: step.description
      }), step.steps && /*#__PURE__*/_jsx("ol", {
        role: "list",
        className: "ds-c-step__substeps",
        children: step.steps.map((s, i) => /*#__PURE__*/_jsx(SubStep, {
          step: {
            ...s,
            ...{
              component: step.component || s.component
            }
          },
          ...props
        }, s.id || i))
      })]
    }), /*#__PURE__*/_jsxs("div", {
      className: "ds-c-step__actions",
      role: "region",
      children: [step.completed && /*#__PURE__*/_jsxs("div", {
        className: "ds-c-step__completed-text",
        children: [/*#__PURE__*/_jsx(CheckIcon, {
          className: "ds-c-icon-color--success"
        }), props.completedText]
      }), linkLabel && /*#__PURE__*/_jsx(StepLink, {
        component: step.component,
        href: step.href,
        stepId: step.id,
        screenReaderText: step.heading,
        onClick: step.onClick || props.onStepLinkClick,
        className: linkClassName,
        children: linkLabel
      })]
    })]
  });
};
export default Step;