import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { IconX, IconChevronSelectorVertical, IconChevronRight } from "../../icons/index.mjs";
/* empty css                                                                                                                                                                                       */
/* empty css                                                                                                                                                                                        */
/* empty css                                                                                                                                                                                                */
/* empty css                                                                                                                                                                                           */
/* empty css                                                                                                                                                                                           */
import { Typography } from "../../primitive/Typography/index.mjs";
import { Button } from "../../primitive/Button/index.mjs";
import AbsoluteTimeRangePicker from "./AbsoluteTimeRangePicker.mjs";
import { toTimeRangeValue, timeFormatter, formatDuration, DEFAULT_QUICK_RANGES } from "./helpers.mjs";
import { DEFAULT_TIME_FORMAT, DEFAULT_TIME_FORMAT_WITH_TIMEZONE, DEFAULT_TIME_RANGE, addOffsetUTC, fromTimeRangeValue, getUTCString, toURLTimeRange, urlToTimeRange, urlToTimeRangeValue } from "./helpers.mjs";
import { useHover } from "../../node_modules/.pnpm/@mantine_hooks@7.15.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-hover/use-hover.mjs";
import { Menu } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Menu/Menu.mjs";
import { Tooltip } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Tooltip/Tooltip.mjs";
import { ActionIcon } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.mjs";
import { Group } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.mjs";
import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
import { Text } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Text/Text.mjs";
const TimeRangePicker = ({
  value,
  minDateTime,
  maxDateTime,
  maxDuration,
  disableAbsoluteRanges = false,
  onChange,
  quickRanges = DEFAULT_QUICK_RANGES,
  loading,
  placeholder,
  badgePlaceholder,
  clearable,
  timezone,
  sx,
  dateInputFormat,
  datePickerProps,
  localization,
  relativeFormatter,
  absoluteFormatter
}) => {
  const [opened, setOpened] = useState(false);
  const [customMode, setCustomMode] = useState(false);
  const isEmptyValue = !value;
  const isRelativeRange = (value == null ? void 0 : value.type) === "relative";
  const isFuture = isRelativeRange && (value == null ? void 0 : value.isFuture);
  const { hovered, ref: targetRef } = useHover();
  const timeRangeValue = isEmptyValue ? void 0 : toTimeRangeValue(value);
  const duration = isEmptyValue ? void 0 : timeRangeValue[1] - timeRangeValue[0];
  const selectedRelativeItem = useMemo(() => {
    if (!value || value.type === "absolute") {
      return;
    }
    return quickRanges.find((it) => it === value.value);
  }, [quickRanges, value]);
  const formattedAbsDateTime = useMemo(() => {
    if (!timeRangeValue) {
      return "";
    }
    if (absoluteFormatter) {
      return absoluteFormatter(value);
    }
    return `${timeFormatter(timeRangeValue[0], timezone ?? null, "MMM D, YYYY HH:mm")} - ${timeFormatter(
      timeRangeValue[1],
      timezone ?? null,
      "MMM D, YYYY HH:mm"
    )}`;
  }, [value]);
  const formattedRelativeDateTime = useMemo(() => {
    if (!value || value.type === "absolute") {
      return "";
    }
    if (relativeFormatter) {
      return relativeFormatter(value);
    }
    return `${isFuture ? "Next" : "Past"} ${formatDuration(duration)}`;
  }, [value]);
  return /* @__PURE__ */ jsxs(
    Menu,
    {
      shadow: "md",
      width: customMode ? "auto" : disableAbsoluteRanges ? 200 : 280,
      position: "bottom-end",
      opened,
      onOpen: () => {
        setOpened(true);
        setCustomMode(false);
      },
      onClose: () => setOpened(false),
      children: [
        /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Tooltip, { label: formattedAbsDateTime, disabled: isRelativeRange || isEmptyValue, withArrow: true, children: /* @__PURE__ */ jsx(
          Button,
          {
            ref: targetRef,
            variant: "default",
            bg: "carbon.0",
            styles: (theme) => ({
              root: {
                paddingLeft: "12px",
                paddingRight: "12px",
                borderColor: opened ? theme.colors.carbon[9] : theme.colors.carbon[4],
                "&:hover": {
                  backgroundColor: theme.colors.carbon[0],
                  borderColor: opened ? theme.colors.carbon[9] : theme.colors.carbon[5]
                },
                "&:active": { transform: "none" }
              },
              inner: {
                width: "100%"
              },
              label: {
                display: "flex",
                justifyContent: "space-between",
                width: "100%",
                fontWeight: 400
              }
            }),
            w: disableAbsoluteRanges ? 200 : 280,
            sx,
            loading,
            rightSection: clearable && !!value && hovered ? /* @__PURE__ */ jsx(
              ActionIcon,
              {
                size: "xs",
                onClick: (e) => {
                  e.stopPropagation();
                  onChange == null ? void 0 : onChange();
                },
                children: /* @__PURE__ */ jsx(IconX, { size: 16, color: "var(--mantine-color-carbon-7)!important" })
              }
            ) : /* @__PURE__ */ jsx(IconChevronSelectorVertical, { size: 16, color: "var(--mantine-color-carbon-7)!important" }),
            children: /* @__PURE__ */ jsxs(Group, { w: "100%", gap: 0, children: [
              /* @__PURE__ */ jsx(Box, { sx: { flex: "none" }, children: /* @__PURE__ */ jsx(DurationBadge, { children: isEmptyValue ? badgePlaceholder || "All" : formatDuration(duration, true) }) }),
              /* @__PURE__ */ jsx(
                Text,
                {
                  px: 8,
                  sx: {
                    flex: "1 1",
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                    textOverflow: "ellipsis",
                    textAlign: "left"
                  },
                  c: isEmptyValue ? "dimmed" : "carbon.8",
                  children: isEmptyValue ? placeholder || "Time Range" : isRelativeRange ? formattedRelativeDateTime : formattedAbsDateTime
                }
              )
            ] })
          }
        ) }) }),
        /* @__PURE__ */ jsx(Menu.Dropdown, { children: customMode ? /* @__PURE__ */ jsx(
          AbsoluteTimeRangePicker,
          {
            value: timeRangeValue,
            minDateTime: minDateTime == null ? void 0 : minDateTime(),
            maxDateTime: maxDateTime == null ? void 0 : maxDateTime(),
            maxDuration,
            onChange: (v) => {
              onChange == null ? void 0 : onChange(v);
              setOpened(false);
            },
            onCancel: () => setOpened(false),
            onReturnClick: () => setCustomMode(false),
            dateInputFormat,
            datePickerProps,
            localization
          }
        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
          !disableAbsoluteRanges && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              Menu.Item,
              {
                rightSection: /* @__PURE__ */ jsx(IconChevronRight, { size: 16 }),
                closeMenuOnClick: false,
                onClick: () => setCustomMode(true),
                children: /* @__PURE__ */ jsx(Typography, { variant: "body-lg", children: (localization == null ? void 0 : localization.entry) || "Custom" })
              }
            ),
            /* @__PURE__ */ jsx(Menu.Divider, {})
          ] }),
          /* @__PURE__ */ jsx(Fragment, { children: quickRanges.map((item) => {
            const isNumber = typeof item === "number";
            const seconds = isNumber ? item : item.value;
            const isFuture2 = isNumber ? false : item.isFuture;
            let label = isNumber ? `Past ${formatDuration(seconds)}` : item.label;
            if (!label) {
              label = isFuture2 ? `Next ${formatDuration(seconds)}` : `Past ${formatDuration(seconds)}`;
            }
            return /* @__PURE__ */ jsx(
              Menu.Item,
              {
                sx: (theme) => ({
                  background: seconds === selectedRelativeItem ? theme.colors.carbon[3] : ""
                }),
                onClick: () => onChange == null ? void 0 : onChange({ type: "relative", value: seconds, isFuture: isFuture2 }),
                children: /* @__PURE__ */ jsx(Text, { children: label })
              },
              seconds
            );
          }) })
        ] }) })
      ]
    }
  );
};
const DurationBadge = ({ children }) => {
  return /* @__PURE__ */ jsx(
    Box,
    {
      display: "inline-block",
      w: 35,
      py: 3,
      bg: "carbon.3",
      c: "carbon.8",
      fz: 10,
      lh: "14px",
      ta: "center",
      sx: { borderRadius: 8 },
      children
    }
  );
};
export {
  DEFAULT_QUICK_RANGES,
  DEFAULT_TIME_FORMAT,
  DEFAULT_TIME_FORMAT_WITH_TIMEZONE,
  DEFAULT_TIME_RANGE,
  TimeRangePicker,
  addOffsetUTC,
  formatDuration,
  fromTimeRangeValue,
  getUTCString,
  timeFormatter,
  toTimeRangeValue,
  toURLTimeRange,
  urlToTimeRange,
  urlToTimeRangeValue
};
