import React, { useCallback } from "react";
import { StepActionButton } from "./StepActionButton";
import { StyledStepTitle, StyledStepHeaderLeft, StyledStepHeader, StyledCustomStep } from "./Styles";
import { Dialog } from "../Dialog";
import { IconButton } from "../IconButton";
import { ArrowBackMobileIcon, CancelCrossIcon } from "../Icons";
import { Caption2, Header3 } from "../Typography";
export const Step = _ref => {
  let {
    index,
    isLast,
    subtitle,
    title,
    onNextButtonClick,
    onPreviousButtonClick,
    onClose,
    children,
    actionLabel = "Proceed",
    shouldRenderNextButton = true,
    changingStepInProgress = false,
    disableBackButton = false,
    customRightHeader,
    skip = false
  } = _ref;
  const onActionButtonClick = useCallback(() => {
    if (isLast && onClose) {
      return onClose();
    }
    return onNextButtonClick && onNextButtonClick();
  }, [isLast, onClose, onNextButtonClick]);
  return !skip ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledStepHeader, null, /*#__PURE__*/React.createElement(StyledStepHeaderLeft, null, !disableBackButton && index && index > 0 ? /*#__PURE__*/React.createElement(IconButton, {
    onClick: onPreviousButtonClick,
    variant: "text gray",
    className: "tw--ml-3 tw-mr-2",
    disabled: changingStepInProgress
  }, /*#__PURE__*/React.createElement(ArrowBackMobileIcon, null)) : null, /*#__PURE__*/React.createElement(StyledStepTitle, null, /*#__PURE__*/React.createElement(Caption2, null, title), /*#__PURE__*/React.createElement(Header3, null, subtitle))), customRightHeader ? customRightHeader : /*#__PURE__*/React.createElement(IconButton, {
    onClick: onClose,
    variant: "text gray",
    disabled: changingStepInProgress
  }, /*#__PURE__*/React.createElement(CancelCrossIcon, null))), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), shouldRenderNextButton ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.Content, null, children), /*#__PURE__*/React.createElement(Dialog.ContentDivider, null), /*#__PURE__*/React.createElement(Dialog.Actions, null, /*#__PURE__*/React.createElement(StepActionButton, {
    isLast: isLast,
    actionLabel: actionLabel,
    onNextButtonClick: onActionButtonClick
  }))) : /*#__PURE__*/React.createElement(StyledCustomStep, null, children)) : null;
};
Step.displayName = "Step";
//# sourceMappingURL=Step.js.map