'use strict';

var index = require('../KitStoreProvider/index.js');
var metric = require('./metric.js');
var MetricActions = require('./MetricActions.js');
var MetricLegend = require('./MetricLegend.js');
var styled = require('./styled.js');
var TooltipFormatter = require('./TooltipFormatter.js');
var type = require('./type.js');
var useParrotTranslation = require('../../hooks/useParrotTranslation.js');
var cs = require('classnames');
var dayjs = require('dayjs');
var React = require('react');
var recharts = require('recharts');
var chart = require('../../store/chart.js');

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

var cs__default = /*#__PURE__*/_interopDefault(cs);
var dayjs__default = /*#__PURE__*/_interopDefault(dayjs);
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 RenderChart = (props) => {
  const {
    metricName,
    showLegend,
    syncId,
    showXAxis,
    yAxisAlign,
    height,
    type: type$1,
    mode = "legend",
    dropdown,
    onLabelsChange,
    metric: metric$1,
    yAxisProps,
    xAxisProps,
    actionsProps,
    tooltipProps
  } = props;
  const { t } = useParrotTranslation();
  const dispatch = index.useKitDispatch();
  const [deselected, setDeselected] = React.useState([]);
  const streams = React.useMemo(() => metric$1.sample_streams, [metric$1]);
  const legends = React.useMemo(() => {
    return metric$1.sample_streams.map((stream) => stream.legend);
  }, [metric$1.sample_streams]);
  const areaChartData = React.useMemo(
    () => metric.convertDataStruct(streams.map((stream) => stream.points)),
    [streams]
  );
  const onLegendClick = React.useCallback(
    (id) => {
      setDeselected((prev) => {
        const include = prev.includes(id);
        const newDeselected = include ? prev.filter((r) => r !== id) : [...prev, id];
        onLabelsChange == null ? void 0 : onLabelsChange(newDeselected);
        return newDeselected.length >= streams.length ? prev : newDeselected;
      });
    },
    [onLabelsChange, streams]
  );
  const hidePointer = React.useCallback(() => {
    dispatch({
      type: chart.ChartActions.SET_POINTER,
      payload: { visible: false, uuid: syncId }
    });
  }, [dispatch, syncId]);
  const handleMouseMove = React.useCallback(
    (e) => {
      var _a;
      if (e.isTooltipActive) {
        const { chartX, activePayload } = e;
        if (!((_a = activePayload == null ? void 0 : activePayload[0]) == null ? void 0 : _a.payload)) {
          return;
        }
        dispatch({
          type: chart.ChartActions.SET_POINTER,
          payload: {
            uuid: syncId,
            visible: true,
            left: chartX,
            text: dayjs__default.default(Number(activePayload[0].payload.t)).format(
              "MM-DD HH:mm:ss"
            ),
            value: activePayload[0].payload.v
          }
        });
      }
    },
    [dispatch, syncId]
  );
  if (!(streams == null ? void 0 : streams.length) || streams.every((stream) => {
    var _a;
    return !((_a = stream.points) == null ? void 0 : _a.length);
  })) {
    return /* @__PURE__ */ React__default.default.createElement("div", { className: styled.MetricLegendTabStyle }, /* @__PURE__ */ React__default.default.createElement("div", { className: "name-toolbar" }, /* @__PURE__ */ React__default.default.createElement(
      MetricLegend.default,
      {
        streams,
        metricName,
        deselected,
        onClick: onLegendClick,
        legends
      }
    )), /* @__PURE__ */ React__default.default.createElement("div", { className: cs__default.default("content", mode === "single" && "single-content") }, t("metric.empty")));
  }
  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("div", { className: "metric-toolbar" }, showLegend && /* @__PURE__ */ React__default.default.createElement(
    MetricLegend.default,
    {
      streams,
      metricName,
      deselected,
      onClick: onLegendClick,
      legends
    }
  ), (actionsProps == null ? void 0 : actionsProps.show) && /* @__PURE__ */ React__default.default.createElement(MetricActions, __spreadValues({ dropdown }, actionsProps))), /* @__PURE__ */ React__default.default.createElement(recharts.ResponsiveContainer, { height }, /* @__PURE__ */ React__default.default.createElement(
    recharts.AreaChart,
    {
      style: { backgroundColor: "white" },
      margin: showLegend ? { top: 10, left: 10, right: 10, bottom: 0 } : { top: 20, left: 10, right: 10, bottom: 5 },
      data: areaChartData,
      syncId,
      onMouseLeave: hidePointer,
      onMouseMove: handleMouseMove
    },
    /* @__PURE__ */ React__default.default.createElement(
      recharts.XAxis,
      __spreadValues({
        hide: !showXAxis,
        dataKey: "t",
        axisLine: false,
        tickLine: false,
        type: "number"
      }, xAxisProps)
    ),
    /* @__PURE__ */ React__default.default.createElement(
      recharts.YAxis,
      __spreadValues({
        width: 200,
        mirror: true,
        allowDataOverflow: true,
        axisLine: false,
        tickLine: false,
        orientation: yAxisAlign
      }, yAxisProps)
    ),
    /* @__PURE__ */ React__default.default.createElement(
      recharts.Tooltip,
      __spreadValues({
        content: tooltipProps.format && /* @__PURE__ */ React__default.default.createElement(
          TooltipFormatter,
          {
            deselected,
            legends,
            format: tooltipProps.format
          }
        )
      }, tooltipProps)
    ),
    streams.map((item, index) => {
      if (deselected.includes(item.legend.id)) {
        return null;
      }
      return /* @__PURE__ */ React__default.default.createElement(
        recharts.Area,
        {
          key: index,
          dataKey: `v${index}`,
          stackId: type$1 === type.GraphType.Stack ? "stack" : void 0,
          stroke: item.legend.stroke ? `${item.legend.color}1A` : item.legend.color,
          fill: item.legend.fill,
          isAnimationActive: false,
          activeDot: {
            stroke: item.legend.color,
            r: 4,
            strokeWidth: 2,
            fill: "white"
          }
        }
      );
    })
  )));
};
var RenderChart$1 = RenderChart;

module.exports = RenderChart$1;
