"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { useState, useMemo, Fragment } from "react";
import { ChartKPI } from "./ChartKPI.js";
import { ChartTimeRangeOption } from "./ChartTimeRangeOption.js";
import { Dropdown } from "../Dropdown/Dropdown.js";
import { Tooltip } from "../Tooltip/Tooltip.js";
import { Icon } from "../../atoms/Icon/Icon.js";
import { Flex } from "../../atoms/Flex/Flex.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Text } from "../../atoms/Text/Text.js";
import { Divider } from "../../atoms/Divider/Divider.js";
const ChartHeaderRow = ({
  kpis,
  selectedKPI,
  headerLabel,
  addOn,
  handleChartHeaderKPISelected,
  showTimeWarning,
  timeRangeOptions,
  selectedTimeRange,
  renderTimeRange = (option) => /* @__PURE__ */ jsx(Text.C10, { children: option }),
  dropDownOptions = [],
  onDropDownSelect,
  dropDownValue,
  handleTimeRangeOptionSelected
}) => {
  var _a, _b;
  const [open, setOpen] = useState(false);
  const label = ((_a = useMemo(() => dropDownOptions.find((o) => o.value === dropDownValue), [dropDownValue, dropDownOptions])) == null ? void 0 : _a.label) ?? ((_b = dropDownOptions[0]) == null ? void 0 : _b.label);
  const ChevronIcon = useMemo(
    () => open ? /* @__PURE__ */ jsx(Icon.CaretUp, { size: "16px", color: "White" }) : /* @__PURE__ */ jsx(Icon.CaretDown, { size: "16px", color: "White" }),
    [open]
  );
  return /* @__PURE__ */ jsxs(Flex.Column, { gap: Spacing["16px"], sx: { pb: Spacing["32px"] }, children: [
    /* @__PURE__ */ jsxs(Flex.Row, { justify: "space-between", align: "center", children: [
      /* @__PURE__ */ jsxs(Flex.Row, { align: "center", gap: Spacing["4px"], children: [
        dropDownOptions.length > 0 ? /* @__PURE__ */ jsxs(Dropdown, { onOpenChange: setOpen, onValueChange: onDropDownSelect, type: "select", value: dropDownValue, children: [
          /* @__PURE__ */ jsx(Dropdown.Button, { children: /* @__PURE__ */ jsxs(Flex.Row, { align: "center", gap: Spacing["4px"], children: [
            /* @__PURE__ */ jsx(Text.P16, { as: "span", children: label }),
            ChevronIcon
          ] }) }),
          /* @__PURE__ */ jsx(Dropdown.Menu, { align: "start", children: dropDownOptions.map((o) => /* @__PURE__ */ jsx(Dropdown.Menu.Item, { value: o.value, children: o.label }, o.value)) })
        ] }) : headerLabel ? /* @__PURE__ */ jsx(Text.H16, { children: headerLabel }) : null,
        showTimeWarning ? /* @__PURE__ */ jsx(Tooltip, { content: showTimeWarning, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Icon.Info, { size: "12px" }) }) }) : null
      ] }),
      /* @__PURE__ */ jsx(Flex.Row, { align: "center", gap: Spacing["16px"], children: timeRangeOptions.map((opt) => /* @__PURE__ */ jsx(
        ChartTimeRangeOption,
        {
          option: opt,
          active: selectedTimeRange === opt,
          handleTimeRangeOptionSelect: handleTimeRangeOptionSelected,
          children: renderTimeRange(opt)
        },
        opt
      )) })
    ] }),
    kpis && kpis.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(Divider, {}),
      /* @__PURE__ */ jsx(Flex.Row, { align: "center", children: kpis.map((total) => /* @__PURE__ */ jsx(
        ChartKPI,
        {
          kpi: total.kpi,
          label: total.kpiLabel,
          timeframeLabel: total.timeframe,
          total: total.total,
          currency: total.currency,
          trendingPercent: total.trendingPercent,
          handleKpiSelect: handleChartHeaderKPISelected,
          active: selectedKPI && selectedKPI.kpi === total.kpi
        },
        total.kpi
      )) })
    ] }) : null,
    addOn
  ] });
};
export {
  ChartHeaderRow
};
