'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tower = require('../../utils/tower.js');
var cs = require('classnames');
var React = require('react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var cs__default = /*#__PURE__*/_interopDefault(cs);
var React__default = /*#__PURE__*/_interopDefault(React);

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
  enumerable: true,
  configurable: true,
  writable: true,
  value
}) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
  }
  return a;
};
const StackBar = "E_4100_0_7_skwah65";
const useShapeStyle = (shape, color) => {
  return React.useMemo(() => {
    switch (shape) {
      case "stripes":
        return {
          backgroundImage: `linear-gradient(-45deg, 
                ${color} 25%, 
                transparent 25%, 
                transparent 50%, 
                ${color} 50%, 
                ${color} 75%, 
                transparent 75%, 
                transparent)`,
          backgroundSize: "4px 4px"
        };
      default:
        return {
          backgroundColor: color
        };
    }
  }, [color, shape]);
};
function getWidth(input) {
  const {
    value,
    unit
  } = tower.formatPercent(input);
  return value + unit;
}
const BarItem = props => {
  const {
    color,
    shape,
    style,
    className
  } = props;
  const shapeStyle = useShapeStyle(shape, color);
  return /* @__PURE__ */React__default.default.createElement("div", {
    className,
    style: __spreadValues(__spreadValues({}, shapeStyle), style)
  });
};
const BarChart = ({
  data,
  total,
  className
}) => {
  return /* @__PURE__ */React__default.default.createElement("div", {
    className: cs__default.default(StackBar, className)
  }, (data || []).map((item, index) => {
    const {
      value,
      color,
      shape = "fill"
    } = item;
    const width = total === 0 ? 0 : getWidth(100 * value / total);
    return /* @__PURE__ */React__default.default.createElement(BarItem, {
      className: "stack-bar-item",
      key: index,
      shape,
      color,
      style: {
        width,
        display: value === 0 || total === 0 ? "none" : "inline-block"
      }
    });
  }));
};
var BarChart$1 = BarChart;

exports.default = BarChart$1;
exports.getWidth = getWidth;
