"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _ = require("../..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getStatusIcon = function getStatusIcon(status) {
  switch (status) {
    case 'NEUTRAL':
      return _react.default.createElement(_.Icon.InformationFill24, {
        color: function color(t) {
          return t.color.emptyState;
        }
      });
    case 'PENDING':
      return _react.default.createElement(_.Icon.ClockFill24, {
        color: function color(t) {
          return t.color.emptyState;
        }
      });
    case 'ACTIVE':
      return _react.default.createElement(_.Icon.InformationFill24, {
        color: function color(t) {
          return t.color.cta;
        }
      });
    case 'WARNING':
      return _react.default.createElement(_.Icon.WarningFill24, {
        color: function color(t) {
          return t.color.timelineWarning;
        }
      });
    case 'FAILURE':
      return _react.default.createElement(_.Icon.ErrorFill24, {
        color: function color(t) {
          return t.color.timelineFailure;
        }
      });
    case 'SUCCESS':
    default:
      return _react.default.createElement(_.Icon.CheckCircleFill24, {
        color: function color(t) {
          return t.color.timelineSuccess;
        }
      });
  }
};
var StyledBox = (0, _styledComponents.default)(_.Box).withConfig({
  displayName: "Timeline__StyledBox",
  componentId: "sc-1nx2354-0"
})(["display:flex;z-index:2;width:", "px;justify-content:center;"], function (t) {
  return t.theme.spacing.unit(6);
});
var StyledUl = _styledComponents.default.ul.withConfig({
  displayName: "Timeline__StyledUl",
  componentId: "sc-1nx2354-1"
})(["padding-left:0;margin-top:0;margin-bottom:0;"]);
var StyledContainer = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "Timeline__StyledContainer",
  componentId: "sc-1nx2354-2"
})(["width:100%;"]);
var StyledFlexbox = (0, _styledComponents.default)(_.Flexbox).withConfig({
  displayName: "Timeline__StyledFlexbox",
  componentId: "sc-1nx2354-3"
})(["width:100%;padding-top:", "px;padding-bottom:", "px;"], function (t) {
  return t.theme.spacing.unit(1);
}, function (t) {
  return t.theme.spacing.unit(1);
});
var lineHeight = function lineHeight(iconSize) {
  switch (iconSize) {
    case '16':
      return '5';
    case '32':
      return '12';
    default:
      return '10';
  }
};
var lineStyles = function lineStyles(status, props) {
  var theme = props.theme,
    $colorSuccess = props.$colorSuccess,
    $colorNext = props.$colorNext,
    $colorFailure = props.$colorFailure,
    $colorWarning = props.$colorWarning,
    $iconSize = props.$iconSize;
  return "\n    content: '';\n    position: absolute;\n    height: Calc(50% - ".concat(lineHeight($iconSize), "px); /* compensation for different icon sizes and non filled icons */\n    left: 11px;\n    width: 2px;\n    z-index: 1;\n    background: ").concat(function () {
    switch (status) {
      case 'NEUTRAL':
      case 'ACTIVE':
      case 'PENDING':
        return $colorNext ? $colorNext(theme) : theme.color.timelineNext;
      case 'WARNING':
        return $colorWarning ? $colorWarning(theme) : theme.color.timelineNext;
      case 'FAILURE':
        return $colorFailure ? $colorFailure(theme) : theme.color.timelineNext;
      case 'SUCCESS':
      default:
        return $colorSuccess ? $colorSuccess(theme) : theme.color.timelineSuccess;
    }
  }(), ";\n  ");
};
var StyledListItem = (0, _styledComponents.default)(_.ListItem).withConfig({
  displayName: "Timeline__StyledListItem",
  componentId: "sc-1nx2354-4"
})(["", " position:relative;& ::before{", ";}& :first-child::before{content:none;}& ::after{", ";bottom:0;}& :last-child::after{content:none;}"], function (p) {
  return !p.$hideSeparators && "\n  /* Divider of each element except last one */\n  &:not(:last-of-type) > div > div:nth-child(2) {\n    border-bottom: 1px solid ".concat(p.theme.color.divider, ";\n  }\n  ");
}, function (props) {
  return lineStyles(props.$previousStatus, props);
}, function (props) {
  return lineStyles(props.$currentStatus, props);
});
var dateTimeOptions = {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
  weekday: 'short'
};
var Timeline = function Timeline(_ref) {
  var _steps$reverse;
  var steps = _ref.steps,
    colorSuccess = _ref.colorSuccess,
    colorNext = _ref.colorNext,
    colorFailure = _ref.colorFailure,
    colorWarning = _ref.colorWarning,
    _ref$hideSeparators = _ref.hideSeparators,
    hideSeparators = _ref$hideSeparators === void 0 ? false : _ref$hideSeparators;
  var previousStatus;
  return _react.default.createElement(StyledUl, null, (_steps$reverse = steps.reverse()) === null || _steps$reverse === void 0 ? void 0 : _steps$reverse.map(function (step, index) {
    var _icon$type;
    var date = step.date,
      text = step.text,
      status = step.status,
      button = step.button,
      icon = step.icon;
    var statusIcon = getStatusIcon(status);
    if (index > 0 && steps.length > 0) {
      previousStatus = steps[index - 1].status;
    }
    var iconName = icon === null || icon === void 0 || (_icon$type = icon.type) === null || _icon$type === void 0 ? void 0 : _icon$type.name;
    var iconSize = iconName === null || iconName === void 0 ? void 0 : iconName.substring(iconName.length, iconName.length - 2);
    return _react.default.createElement(StyledListItem, {
      key: "".concat(date, "_").concat(index),
      $previousStatus: previousStatus,
      $currentStatus: status,
      $colorSuccess: colorSuccess,
      $colorNext: colorNext,
      $colorFailure: colorFailure,
      $colorWarning: colorWarning,
      $hideSeparators: hideSeparators,
      $iconSize: iconSize
    }, _react.default.createElement(StyledContainer, {
      container: true,
      direction: "row",
      alignItems: "center",
      gap: 2
    }, _react.default.createElement(StyledBox, null, icon || statusIcon), _react.default.createElement(StyledFlexbox, {
      item: true,
      container: true,
      direction: "row",
      alignItems: "center"
    }, _react.default.createElement(_.Flexbox, {
      item: true,
      container: true,
      direction: "column"
    }, date ? _react.default.createElement(_.Typography, {
      type: "tertiary",
      color: function color(t) {
        return t.color.label;
      }
    }, date instanceof Date ? _react.default.createElement(_.DateTime, {
      options: dateTimeOptions,
      value: date.toUTCString()
    }) : date) : null, _react.default.createElement(_.Typography, {
      type: "secondary"
    }, text)), button && _react.default.createElement(_.Box, {
      ml: "auto"
    }, _react.default.createElement(_.Button, {
      onClick: button.onClick
    }, button.label)))));
  }));
};
var _default = exports.default = Timeline;