import { CHART_COLORS as I } from "./index-colors.js";
import { parseCssVariable as z } from "./index-css-variables-parser.js";
import { deviceService as C } from "./index-device.service.js";
import { translationService as v } from "./index-translation.service.js";
import { useGetTotalSeriesValues as K } from "./index-use-get-total-series-values.js";
import R from "./index-moment.js";
import { useState as S, useEffect as X } from "react";
const x = 8, j = (a) => {
  const {
    labels: L,
    customLegendItems: l,
    showLegend: $ = !0,
    replacements: u,
    colors: f = I,
    series: i,
    previousSeries: k,
    yaxisMin: g,
    yaxisMax: d,
    yaxisTickAmount: h,
    options: w
  } = a, D = K(i, k), y = (s) => {
    const t = [];
    return s.forEach((e, r) => {
      e.toString().length > 3 ? t[r] = `${e.toString().slice(0, 1)},${e.toString().slice(1, 3)} K` : t[r] = `${e}`;
    }), t;
  }, A = (s) => s.map((t) => z(t)), M = () => {
    var e, r;
    const s = ((r = (e = i == null ? void 0 : i[0]) == null ? void 0 : e.data) == null ? void 0 : r.length) ?? 0, t = C.isMobile();
    return s > 30 || t && s > 7 ? x : "dataPoints";
  }, m = (s) => ({
    ...f ? {
      colors: A(f)
    } : {},
    labels: L ?? [],
    chart: {
      id: "rcLineChart",
      toolbar: {
        show: !1
      },
      zoom: {
        enabled: !1
      }
    },
    tooltip: {
      enabled: !0,
      enabledOnSeries: void 0,
      shared: !0,
      followCursor: !0,
      intersect: !1,
      inverseOrder: !1,
      marker: {
        show: !0
      },
      items: {
        display: "flex"
      },
      custom: ({
        series: t,
        seriesIndex: e,
        dataPointIndex: r,
        w: o
      }) => {
        let n = new Date(o.config.series[0].data[r][0]).toLocaleDateString();
        a.tooltipDateFormatter && (n = a.tooltipDateFormatter(new Date(o.config.series[0].data[r][0]))), o.config.labels && o.config.labels[r] != null && (n = o.config.labels[r]);
        let p = "";
        return t.forEach((b, c) => {
          p += `<div class="rcLineChart-tooltip-row">
                <div class="rcLineChart-tooltip-color" style="background-color: ${o.config.colors ? o.config.colors[c] : o.globals.colors[c]}"></div>
                <span>${o.config.series[c].name}</span>
                <span class="rcLineChart-tooltip-row-number">${b[r] == null ? "no data" : b[r]}</span>
            </div>`;
        }), `<div class="rcLineChart-tooltip"><p class="rcLineChart-tooltip-title">${n}</p>${p}</div>`;
      }
    },
    legend: {
      showForSingleSeries: !0,
      show: $,
      position: "top",
      horizontalAlign: C.isMobile() ? "left" : "right",
      floating: !1,
      fontSize: "12px",
      fontFamily: "Roboto",
      fontWeight: 400,
      formatter: (t, e) => l ? `${v.get(l[e.seriesIndex][0], u).value}<br><span data-testid="legendTotalValue${e.seriesIndex}" class="totalValue">${v.get(l[e.seriesIndex][1], u).value}</span>` : `${t}<br><span data-testid="legendTotalValue${e.seriesIndex}" class="totalValue">${y(D(s))[e.seriesIndex]}</span>`,
      inverseOrder: !1,
      markers: {
        width: 12,
        height: 12,
        radius: 12
      },
      onItemClick: {
        toggleDataSeries: !1
      }
    },
    xaxis: {
      type: "datetime",
      tickAmount: M(),
      position: "bottom",
      axisTicks: {
        show: !1
      },
      tooltip: {
        enabled: !1
      },
      crosshairs: {
        show: !0
      },
      axisBorder: {
        show: !0,
        color: "rgba(4, 5, 6, 0.2)"
        // todo: replace with variable
      },
      labels: {
        offsetX: 5,
        showDuplicates: !1,
        formatter: (t, e) => a.labelDateFormatter ? !e || e < 1e9 ? "" : a.labelDateFormatter(new Date(e)) : R(e).format("DD MMM")
      }
    },
    grid: {
      show: !0,
      borderColor: "rgba(4, 5, 6, 0.2)",
      xaxis: {
        lines: {
          show: !0
        }
      },
      yaxis: {
        lines: {
          show: !1
        }
      }
    },
    yaxis: {
      opposite: !0,
      tickAmount: h || 4,
      ...g ? {
        min: g
      } : {},
      ...d ? {
        max: d
      } : {}
    },
    markers: {
      size: 5,
      hover: {
        size: 6
      }
    },
    stroke: {
      curve: "smooth",
      width: 2
    },
    ...w
  }), [O, T] = S(m(i)), [V, F] = S(0);
  return X(() => {
    T(m(i)), F((s) => s + 1);
  }, [i]), {
    lineChartOptions: O,
    renderKey: V
  };
};
export {
  j as useLineChartOptions
};
