import { styled } from '@linaria/react';
import Bit from '../../core/Bit/index.js';
import BitPerSecond from '../../core/BitPerSecond/index.js';
import Bps from '../../core/Bps/index.js';
import Byte from '../../core/Byte/index.js';
import BytePerSecond from '../../core/BytePerSecond/index.js';
import Frequency from '../../core/Frequency/index.js';
import Percent from '../../core/Percent/index.js';
import Second from '../../core/Second/index.js';
import Speed from '../../core/Speed/index.js';
import { TertiaryText } from '../../core/Styled/index.js';
import Tooltip from '../../core/Tooltip/index.js';
import UnitWithChart, { UnitWrapper } from '../UnitWithChart/index.js';
import { formatPercent } from '../../utils/tower.js';
import _ from 'lodash';
import React__default from 'react';

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

export { ChartWithUnit, ChartWithTooltip$1 as default };
