"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("../..");
var _ProgressIndicator = require("./ProgressIndicator.styled");
var _Media = require("../../Atoms/Media");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ProgressIndicator = function ProgressIndicator(_ref) {
  var numberOfSteps = _ref.numberOfSteps,
    currentStep = _ref.currentStep,
    title = _ref.title,
    closeCallback = _ref.closeCallback,
    backCallback = _ref.backCallback,
    infoCallback = _ref.infoCallback,
    _ref$exitText = _ref.exitText,
    exitText = _ref$exitText === void 0 ? 'Exit' : _ref$exitText,
    _ref$infoText = _ref.infoText,
    infoText = _ref$infoText === void 0 ? 'Info' : _ref$infoText,
    _ref$infoIcon = _ref.infoIcon,
    infoIcon = _ref$infoIcon === void 0 ? 'info' : _ref$infoIcon,
    _ref$buttonCallback = _ref.buttonCallback,
    buttonCallback = _ref$buttonCallback === void 0 ? false : _ref$buttonCallback,
    _ref$borderBottomMobi = _ref.borderBottomMobile,
    borderBottomMobile = _ref$borderBottomMobi === void 0 ? true : _ref$borderBottomMobi;
  var isMobile = (0, _Media.useMedia)(function (theme) {
    return theme.media.lessThan(theme.breakpoints.sm);
  });
  var isFirstStep = currentStep === 1;
  var noCloseAndBack = !closeCallback && !backCallback;
  var noButtons = noCloseAndBack && !infoCallback;
  var noBackButton = !backCallback;
  var handleBackAndCloseClick = function handleBackAndCloseClick() {
    if ((isFirstStep || noBackButton) && closeCallback) return closeCallback();
    if (backCallback) return backCallback();
    return null;
  };
  return _react.default.createElement(_ProgressIndicator.StyledBox, {
    px: 3,
    pt: 3,
    pb: 2,
    md: {
      p: 5
    },
    backgroundColor: function backgroundColor(t) {
      return t.colorTokens.neutral.background_default;
    },
    $isMobile: !!isMobile,
    $borderBottomMobile: borderBottomMobile
  }, _react.default.createElement(_.Flexbox, {
    container: true,
    justifyContent: "space-between",
    gap: 6,
    alignItems: "center"
  }, _react.default.createElement(_ProgressIndicator.StyledButton, {
    size: "l",
    variant: "secondary",
    onClick: handleBackAndCloseClick,
    $visible: !isFirstStep && !!backCallback || isFirstStep && !!closeCallback || noBackButton,
    $hide: buttonCallback && !isMobile || noButtons || !backCallback && !isFirstStep && !noBackButton || noCloseAndBack,
    $isMobile: !!isMobile
  }, isFirstStep || noBackButton ? _react.default.createElement(_.Icon.Cross16, {
    color: "currentColor"
  }) : _react.default.createElement(_.Icon.ChevronLeft16, {
    color: "currentColor"
  })), _react.default.createElement(_.Flexbox, {
    item: true,
    container: true,
    justifyContent: "space-between",
    gap: 2,
    alignItems: "center",
    width: "auto",
    flex: "1"
  }, _react.default.createElement(_ProgressIndicator.CompletionBar, {
    completion: Number(currentStep) / Number(numberOfSteps),
    noButtons: noButtons
  })), typeof infoCallback === 'function' ? _react.default.createElement(_ProgressIndicator.StyledButton, {
    size: "l",
    variant: "secondary",
    onClick: function onClick() {
      return infoCallback();
    },
    $visible: !!infoCallback,
    $hide: noButtons || buttonCallback && !isMobile,
    $isMobile: !!isMobile
  }, infoIcon === 'info' ? _react.default.createElement(_.Icon.Information16, {
    color: "currentColor"
  }) : _react.default.createElement(_.Icon.Help16, {
    color: "currentColor"
  })) : buttonCallback && isMobile && infoCallback), _react.default.createElement(_.Box, {
    pt: 3
  }, _react.default.createElement(_.Flexbox, {
    container: true,
    justifyContent: "space-between",
    alignItems: "flex-start"
  }, title && _react.default.createElement(_.Box, {
    pr: 2
  }, _react.default.createElement(_.Typography, {
    type: "title2"
  }, title)), buttonCallback && !isMobile && _react.default.createElement(_.Flexbox, {
    item: true,
    container: true,
    justifyContent: "flex-end",
    flex: "1"
  }, _react.default.createElement(_.Flexbox, {
    container: true,
    gap: 3,
    direction: "row",
    alignItems: "center"
  }, typeof infoCallback === 'function' ? _react.default.createElement(_ProgressIndicator.StyledButtonPill, {
    variant: "secondary",
    icon: infoIcon === 'info' ? _react.default.createElement(_.Icon.Information16, {
      color: "currentColor"
    }) : _react.default.createElement(_.Icon.Help16, {
      color: "currentColor"
    }),
    onClick: function onClick() {
      return infoCallback();
    },
    size: "s"
  }, infoText) : infoCallback, closeCallback && _react.default.createElement(_ProgressIndicator.StyledButtonPill, {
    variant: "secondary",
    icon: _react.default.createElement(_.Icon.Cross16, {
      color: "currentColor"
    }),
    onClick: closeCallback,
    size: "s"
  }, exitText))))));
};
var _default = exports.default = ProgressIndicator;