"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Typography = _interopRequireDefault(require("../../Atoms/Typography"));
var _Number = _interopRequireDefault(require("../Number"));
var _Icon = _interopRequireDefault(require("../../Atoms/Icon"));
var _Flexbox = _interopRequireDefault(require("../../Atoms/Flexbox"));
var _Box = _interopRequireDefault(require("../../Atoms/Box"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var StyledBarItem = (0, _styledComponents.default)(_Flexbox.default).withConfig({
  displayName: "AllocationBar__StyledBarItem",
  componentId: "sc-7dkwdd-0"
})(["background-color:", ";transition:0.5s ease;transition-delay:0.3s;border-radius:", ";"], function (p) {
  return p.$color(p.theme);
}, function (_ref) {
  var $isFirst = _ref.$isFirst,
    $isLast = _ref.$isLast,
    theme = _ref.theme;
  if ($isFirst && $isLast) return theme.borderRadius2;
  if ($isFirst) return "".concat(theme.borderRadius2, " 0 0 ").concat(theme.borderRadius2);
  if ($isLast) return "0 ".concat(theme.borderRadius2, " ").concat(theme.borderRadius2, " 0");
  return '0';
});
var AllocationBar = function AllocationBar(_ref2) {
  var _allocations$sort;
  var allocations = _ref2.allocations,
    _ref2$height = _ref2.height,
    height = _ref2$height === void 0 ? 2 : _ref2$height;
  return _react.default.createElement(_Flexbox.default, {
    container: true
  }, allocations === null || allocations === void 0 || (_allocations$sort = allocations.sort(function (a, b) {
    return b.weight - a.weight;
  })) === null || _allocations$sort === void 0 ? void 0 : _allocations$sort.map(function (_ref3, index) {
    var color = _ref3.color,
      weight = _ref3.weight,
      label = _ref3.label;
    return weight > 0 && _react.default.createElement(_Flexbox.default, {
      item: true,
      key: label,
      flex: "".concat(weight, "%")
    }, _react.default.createElement(_Flexbox.default, {
      container: true,
      alignItems: "center"
    }, _react.default.createElement(_Icon.default.Dot8, {
      color: color
    }), _react.default.createElement(_Box.default, {
      ml: 2
    }, _react.default.createElement(_Flexbox.default, {
      item: true,
      container: true,
      direction: "column"
    }, _react.default.createElement(_Typography.default, {
      type: "secondary",
      weight: "bold"
    }, _react.default.createElement(_Number.default, {
      value: weight,
      percentage: true
    })), _react.default.createElement(_Typography.default, {
      type: "secondary",
      color: function color(t) {
        return t.color.label;
      }
    }, label)))), _react.default.createElement(StyledBarItem, {
      item: true,
      height: height,
      flex: "".concat(weight, "%"),
      $color: color,
      $isFirst: index === 0,
      $isLast: allocations.length === index + 1
    }));
  }));
};
var _default = exports.default = AllocationBar;