'use strict';

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

var react = require('@linaria/react');
var index$a = require('../../core/Bit/index.js');
var index$9 = require('../../core/BitPerSecond/index.js');
var index$8 = require('../../core/Bps/index.js');
var index$4 = require('../../core/Byte/index.js');
var index$5 = require('../../core/BytePerSecond/index.js');
var index$6 = require('../../core/Frequency/index.js');
var index$3 = require('../../core/Percent/index.js');
var index$b = require('../../core/Second/index.js');
var index$7 = require('../../core/Speed/index.js');
var index$2 = require('../../core/Styled/index.js');
var index$1 = require('../../core/Tooltip/index.js');
var index = require('../UnitWithChart/index.js');
var tower = require('../../utils/tower.js');
var _ = require('lodash');
var React = require('react');

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

var ___default = /*#__PURE__*/_interopDefault(_);
var React__default = /*#__PURE__*/_interopDefault(React);

const units = {
  Percent: index$3,
  Byte: index$4,
  BytePerSecond: index$5,
  Frequency: index$6,
  Speed: index$7,
  Bps: index$8,
  BitPerSecond: index$9,
  Bit: index$a,
  Second: index$b
};
const ChartContent = /*#__PURE__*/react.styled('div')({
  name: "ChartContent",
  class: "E_4100_0_7_c18bcrac",
  propsAsIs: false
});
const ChartTooltipContainer = /*#__PURE__*/react.styled('div')({
  name: "ChartTooltipContainer",
  class: "E_4100_0_7_cro7kg2",
  propsAsIs: false
});
const ChartTooltipRow = /*#__PURE__*/react.styled('div')({
  name: "ChartTooltipRow",
  class: "E_4100_0_7_c14wcxf0",
  propsAsIs: false
});
const _exp = /*#__PURE__*/() => ChartTooltipRow;
const ChartTooltipTitle = /*#__PURE__*/react.styled(_exp())({
  name: "ChartTooltipTitle",
  class: "E_4100_0_7_coy29mj",
  propsAsIs: true
});
const _exp2 = /*#__PURE__*/() => props => props.color;
const SpaceStatus = /*#__PURE__*/react.styled('i')({
  name: "SpaceStatus",
  class: "E_4100_0_7_s11212zy",
  propsAsIs: false,
  vars: {
    "s11212zy-0": [_exp2()]
  }
});
const PrimaryUnit = /*#__PURE__*/react.styled('div')({
  name: "PrimaryUnit",
  class: "E_4100_0_7_p1lyky6c",
  propsAsIs: false
});
const ChartWithUnit = props => {
  const {
    items,
    rawValue,
    unit,
    chartType,
    tableUnit,
    total
  } = props;
  const finalTableUnit = tableUnit != null ? tableUnit : unit;
  const emptyDisplay = rawValue2 => {
    if (___default.default.isNil(rawValue2)) {
      return /* @__PURE__ */React__default.default.createElement(index$2.TertiaryText, null, "-");
    }
    return finalTableUnit === "Percent" ?
    // process 0.0%
    /* @__PURE__ */
    React__default.default.createElement("span", {
      className: index.UnitWrapper
    }, /* @__PURE__ */React__default.default.createElement(index$3, {
      rawValue: rawValue2,
      decimals: 1
    })) : rawValue2;
  };
  return /* @__PURE__ */React__default.default.createElement(ChartContent, null, rawValue || rawValue === 0 ? /* @__PURE__ */React__default.default.createElement(index.default, {
    unit: finalTableUnit,
    rawValue: chartType === "barChart" ? tower.formatPercent(rawValue / total * 100, 1).numberValue : rawValue,
    total,
    chartType,
    data: items
  }) : emptyDisplay(rawValue));
};
const ChartWithTooltip = props => {
  const {
    title,
    items,
    rawValue,
    unit,
    chartType,
    tableUnit,
    saturated
  } = props;
  const KitUnit = units[unit];
  const total = title.value || 0;
  const finalTableUnit = tableUnit != null ? tableUnit : unit;
  const emptyDisplay = rawValue2 => {
    if (___default.default.isNil(rawValue2)) {
      return /* @__PURE__ */React__default.default.createElement(index$2.TertiaryText, null, "-");
    }
    return finalTableUnit === "Percent" ?
    // process 0.0%
    /* @__PURE__ */
    React__default.default.createElement(index$3, {
      rawValue: rawValue2,
      decimals: 1
    }) : rawValue2;
  };
  return /* @__PURE__ */React__default.default.createElement(index$1, {
    title: /* @__PURE__ */React__default.default.createElement(ChartTooltipContainer, null, /* @__PURE__ */React__default.default.createElement(ChartTooltipTitle, null, /* @__PURE__ */React__default.default.createElement("label", null, title.label), /* @__PURE__ */React__default.default.createElement(KitUnit, {
      rawValue: total
    })), items.map(item => {
      var _a;
      return /* @__PURE__ */React__default.default.createElement(ChartTooltipRow, {
        key: item.label
      }, /* @__PURE__ */React__default.default.createElement("label", null, /* @__PURE__ */React__default.default.createElement(SpaceStatus, {
        color: item.color
      }), /* @__PURE__ */React__default.default.createElement("span", null, item.label)), /* @__PURE__ */React__default.default.createElement(PrimaryUnit, {
        className: "value"
      }, /* @__PURE__ */React__default.default.createElement(KitUnit, {
        rawValue: item.value || 0
      }), /* @__PURE__ */React__default.default.createElement("span", null, "(", total ? (item.value ? tower.formatPercent((item.value || 0) / total * 100, 1, (_a = item.saturated) != null ? _a : true).value : 0) + "%" : "-", ")")));
    })),
    overlayStyle: {
      maxWidth: 500,
      minWidth: 246
    }
  }, /* @__PURE__ */React__default.default.createElement(ChartContent, null, total ? rawValue ? /* @__PURE__ */React__default.default.createElement(index.default, {
    unit: finalTableUnit,
    rawValue: chartType === "barChart" ? tower.formatPercent(rawValue / total * 100, 1, saturated != null ? saturated : true).numberValue : rawValue,
    total,
    chartType,
    data: items,
    saturated
  }) : emptyDisplay(rawValue) : emptyDisplay(null)));
};
var ChartWithTooltip$1 = ChartWithTooltip;

exports.ChartWithUnit = ChartWithUnit;
exports.default = ChartWithTooltip$1;
