"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ProgressTracker = void 0;
var _react = _interopRequireDefault(require("react"));
var _i18nReact = require("@kbn/i18n-react");
var _react2 = require("@emotion/react");
var _translations = require("./translations");
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

const ProgressTrackerComponent = ({
  totalActiveSteps,
  totalStepsLeft
}) => {
  if (totalActiveSteps != null && totalStepsLeft != null) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", {
      css: (0, _react2.css)`
            font-wight: bold;
            color: black;
          `
    }, /*#__PURE__*/_react.default.createElement(_i18nReact.FormattedMessage, {
      id: "xpack.securitySolutionServerless.getStarted.welcomePanel.progressTracker.description",
      defaultMessage: "{done} of {total} ",
      values: {
        done: totalActiveSteps - totalStepsLeft,
        total: totalActiveSteps
      }
    })), (0, _translations.WELCOME_PANEL_PROGRESS_TRACKER_DESCRIPTION)(totalActiveSteps));
  }
  return null;
};
const ProgressTracker = /*#__PURE__*/_react.default.memo(ProgressTrackerComponent);
exports.ProgressTracker = ProgressTracker;