import { jsxs as M, jsx as s } from "react/jsx-runtime";
/* empty css                    */
import { CHART_COLORS as f } from "./index-colors.js";
import { resolveCssVariables as b } from "./index-resolve-css-variables.js";
import { translationService as v } from "./index-translation.service.js";
import { BigLegendItem as G } from "./index-BigLegendItem.js";
import { ChartsPlaceholder as I } from "./index-ChartsPlaceholder.js";
import { ComponentContainer as Y } from "./index-ComponentContainer.js";
import { Render as C } from "./index-Render.js";
import n from "react";
import q from "./index-react-apexcharts.min.js";
import { s as J } from "./index-server.browser.js";
const lo = (y) => {
  const {
    series: c,
    categories: x,
    customLegendItems: w,
    colors: m = f,
    chartTitle: L,
    replacements: S,
    showLegend: F,
    legendFillColors: h = f,
    legendFormatter: p,
    height: T = "256px",
    width: $ = "100%",
    containerWidth: k,
    testId: z,
    isLoading: B,
    distributed: d = !0,
    columnWidth: E = "95%",
    showBigLegend: R = !0,
    showPercentage: W = !1,
    yAxisDataFormatter: g,
    showYaxis: A = !0,
    showGrid: H = !0,
    customTooltipFormatter: u
  } = y, N = n.useMemo(() => b(m), [m]), _ = n.useMemo(() => b(h), [h]), O = (t) => t.map((o) => (o = v.get(o).value, o)), V = (t) => t.map((o) => (o = v.get(o).value, o)), j = (t) => {
    let o = 0;
    return t.forEach((e, l) => {
      e.data.forEach((i) => {
        o += i;
      });
    }), o;
  }, D = {
    colors: N,
    chart: {
      stacked: !1,
      toolbar: {
        show: !1
      }
    },
    plotOptions: {
      bar: {
        distributed: d,
        horizontal: !1,
        columnWidth: E,
        borderRadius: 8,
        barHeight: "80%"
      }
    },
    xaxis: {
      type: "category",
      axisBorder: {
        show: !1
      },
      categories: O(x),
      labels: {
        show: !0,
        style: {
          fontSize: "12px"
        }
      },
      tooltip: {
        enabled: !1
      }
    },
    yaxis: {
      show: A,
      axisBorder: {
        show: !0
      },
      opposite: !0,
      labels: {
        show: !0,
        style: {
          fontSize: "12px",
          fontFamily: "var(--theme-typeface)",
          fontWeight: 400
        },
        ...g ? {
          formatter: function(t, o) {
            return g(t, o);
          }
        } : {}
      }
    },
    legend: {
      show: F,
      position: "top",
      fontSize: "12px",
      fontFamily: "var(--theme-typeface)",
      fontWeight: 400,
      horizontalAlign: "right",
      markers: {
        width: 12,
        height: 12,
        radius: 10,
        fillColors: _
      },
      labels: {
        colors: "var(--n700)"
      },
      customLegendItems: V(w),
      ...p ? {
        formatter: function(t, o) {
          return p(t, o);
        }
      } : {}
    },
    dataLabels: {
      enabled: !1
    },
    grid: {
      show: H,
      borderColor: "rgba(4, 5, 6, 0.1)",
      strokeDashArray: 6,
      position: "back",
      xaxis: {
        lines: {
          show: !1
        }
      },
      yaxis: {
        lines: {
          show: !0
        }
      }
    },
    tooltip: {
      enabled: !0,
      theme: "light",
      custom: ({
        series: t,
        dataPointIndex: o,
        w: e
      }) => {
        if (u) {
          const i = e.config.xaxis.categories[o], r = t[0][o], a = u(i, r, o);
          return `<div class="tooltip custom-tooltip">${typeof a == "string" ? a : n.isValidElement(a) ? J.renderToString(a) : String(a)}</div>`;
        }
        let l = "";
        return t.forEach((i, r) => {
          l += `<div class="tooltip-row">
            <div class="tooltip-color" style="background-color: ${d ? e.config.colors ? e.config.colors[o] : e.globals.colors[o] : e.config.colors ? e.config.colors[r] : e.globals.colors[r]}"></div>
            <span class="tooltip-text">${e.config.series[r].name ? e.config.series[r].name : ""}</span>
            <span class="tooltip-number">${i[o]}${W ? "%" : ""}</span>
        </div>`;
        }), `<div class="tooltip">${l}</div>`;
      }
    }
  };
  return M(Y, {
    testId: z,
    className: "barChart-container",
    style: {
      width: k
    },
    children: [s(C, {
      if: B,
      children: s(I, {})
    }), s(C, {
      if: R,
      children: s("div", {
        className: "barChart-header",
        children: s(G, {
          roundNumbers: !0,
          currentNumber: j(c),
          topTitle: L,
          replacements: S
        })
      })
    }), s(q, {
      type: "bar",
      options: D,
      series: c,
      width: $,
      height: T
    })]
  });
};
export {
  lo as BarChart
};
