import React from 'react';
import styled from 'styled-components';
import Typography from '../../Atoms/Typography';
import NumberComponent from '../Number';
import Icon from '../../Atoms/Icon';
import Flexbox from '../../Atoms/Flexbox';
import Box from '../../Atoms/Box';
var StyledBarItem = styled(Flexbox).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.createElement(Flexbox, {
    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.createElement(Flexbox, {
      item: true,
      key: label,
      flex: "".concat(weight, "%")
    }, React.createElement(Flexbox, {
      container: true,
      alignItems: "center"
    }, React.createElement(Icon.Dot8, {
      color: color
    }), React.createElement(Box, {
      ml: 2
    }, React.createElement(Flexbox, {
      item: true,
      container: true,
      direction: "column"
    }, React.createElement(Typography, {
      type: "secondary",
      weight: "bold"
    }, React.createElement(NumberComponent, {
      value: weight,
      percentage: true
    })), React.createElement(Typography, {
      type: "secondary",
      color: function color(t) {
        return t.color.label;
      }
    }, label)))), React.createElement(StyledBarItem, {
      item: true,
      height: height,
      flex: "".concat(weight, "%"),
      $color: color,
      $isFirst: index === 0,
      $isLast: allocations.length === index + 1
    }));
  }));
};
export default AllocationBar;