"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SubLevel = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Typography = _interopRequireDefault(require("../../../Atoms/Typography"));
var _Box = _interopRequireDefault(require("../../../Atoms/Box"));
var _Button = _interopRequireDefault(require("../../Button"));
var _Status = _interopRequireDefault(require("../Status"));
var _constants = require("../constants");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var OrderedList = _styledComponents.default.ol.withConfig({
  displayName: "SubLevel__OrderedList",
  componentId: "sc-68jn3c-0"
})(["", " padding-bottom:", "px;"], _constants.listReset, function (p) {
  return p.theme.spacing.unit(_constants.VERTICAL_PADDING);
});
var ListItem = _styledComponents.default.li.withConfig({
  displayName: "SubLevel__ListItem",
  componentId: "sc-68jn3c-1"
})(["display:block;& + &{padding-top:", "px;}"], function (p) {
  return p.theme.spacing.unit(2);
});
var SubLevel = exports.SubLevel = function SubLevel(_ref) {
  var onStepClick = _ref.onStepClick,
    _ref$steps = _ref.steps,
    steps = _ref$steps === void 0 ? [] : _ref$steps,
    titleDone = _ref.titleDone,
    titleNotDone = _ref.titleNotDone;
  var contentPadding = _constants.HORIZONTAL_PADDING + _constants.STEP_NUMBER_SIZE + _constants.SPACE_TO_STEP_NUMBER;
  var contentPaddingDesktop = _constants.HORIZONTAL_PADDING_DESKTOP + _constants.STEP_NUMBER_SIZE + _constants.SPACE_TO_STEP_NUMBER;
  return _react.default.createElement(OrderedList, null, steps === null || steps === void 0 ? void 0 : steps.map(function (step) {
    var current = step.current,
      done = step.done,
      name = step.name,
      label = step.label;
    return _react.default.createElement(ListItem, {
      key: step.label
    }, _react.default.createElement(_Box.default, {
      pl: contentPadding,
      pr: _constants.HORIZONTAL_PADDING,
      sm: {
        pl: contentPaddingDesktop,
        pr: _constants.HORIZONTAL_PADDING_DESKTOP
      }
    }, current || done ? _react.default.createElement(_Button.default, {
      onClick: function onClick() {
        return onStepClick && onStepClick(name);
      },
      variant: "neutral"
    }, _react.default.createElement(_Typography.default, {
      color: function color(t) {
        return current ? t.color.text : t.color.disabledText;
      },
      type: "secondary",
      weight: current ? 'bold' : 'regular'
    }, _react.default.createElement(_Status.default, {
      done: done,
      noIcons: true,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label)) : _react.default.createElement(_Typography.default, {
      color: function color(t) {
        return t.color.disabledText;
      },
      type: "secondary"
    }, _react.default.createElement(_Status.default, {
      done: done,
      noIcons: true,
      titleDone: titleDone,
      titleNotDone: titleNotDone
    }), label)));
  }));
};