import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-CL5CM9S8.js";
import { BaseControl } from "../base-control/base-control.js";
import { c as clsx } from "../../clsx-DgYk2OaC.js";
import { NumberPicker } from "../number-picker/number-picker.js";
import { generateMarkers, generateGridTemplate } from "./utils.js";
import { HStack } from "../layout/hstack.js";
import { A as AnimatePresence, m as motion } from "../../proxy-0B6wWuDe.js";
/**
 * A single/multi-thumb slider component.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {JSX.Element} [props.icon] - Icon to display within the slider.
 * @param {string} [props.label] - The label of the slider.
 * @param {string} [props.subtitle] - The subtitle of the slider.
 * @param {string} [props.help] - The help text shown below the slider.
 * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display next to the label.
 * @param {Number} [props.min=0] - The minimum value of the slider.
 * @param {Number} [props.max=100] - The maximum value of the slider.
 * @param {Number} [props.step=1] - The step value of the slider.
 * @param {Number} [props.startPoint] - The starting point of the slider.
 * @param {SliderMarkerType} [props.markers] - The markers to display on the slider. If `true`, markers are auto-generated, with labels. If set to `dots`, markers are auto-generated, but do not show labels next to dots. If an object is provided, the keys are the values of the markers, and the values are the labels.
 * @param {Number | Number[]} props.value - The current value of the slider.
 * @param {Function} props.onChange - Function to run when the value changes.
 * @param {Function} props.onChangeEnd - Function to run when the value change ends.
 * @param {boolean} [props.disabled] - If `true`, the slider is disabled.
 * @param {boolean} [props.inputField=false] - If `true`, the slider will display an input field for the value. For multi-thumb sliders, the input field will be displayed for the focused thumb.
 * @param {boolean} [props.vertical=false] - If `true`, the slider will be displayed vertically.
 * @param {JSX.Element} [props.before] - Element to display before the slider.
 * @param {JSX.Element} [props.after] - Element to display after the slider.
 * @param {string[]} [props.thumbLabels] - ARIA labels for the thumbs.
 * @param {Function} [props.thumbContent] - If provided, the function will be called with the current value of the thumb, and the return value will be displayed within the thumb. `(currentIndex: number) => JSX.Element`.
 * @param {Function} [props.tooltipContent] - If provided, the function will format the tooltip content. `(value) => JSX.Element`.
 * @param {string} [props.labelClassName] - Additional classes to pass to the label.
 * @param {Object<string, any>} [props.trackStyle] - Additional style for the track.
 * @param {Number} [props.markerStep] - If provided, this value is used to generate markers instead of the step value. Useful when using small steps with a larger range.
 * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
 * @param {boolean} [props.trackBgGradientSupport] - If `true`, parts of the track will get additional background size and position settings to make the gradient more seamless. Supported only in horizontal mode. BETA!
 * @param {boolean} [props.noActiveHighlight] - If `true`, the active area highlight will not be shown.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The Slider component.
 *
 * @typedef {'dots' | 'lines' | 'true' | Object<Number, string>} SliderMarkerType
 *
 * @example
 * <Slider
 * 	label='My slider'
 * 	value={sliderValue}
 * 	onChange={setSliderValue}
 * />
 *
 * @preserve
 */
const Slider = (props) => {
  const {
    icon,
    label,
    subtitle,
    help,
    actions,
    min = 0,
    max = 100,
    step = 1,
    startPoint: rawStartPoint,
    markers,
    value,
    onChange,
    onChangeEnd,
    disabled,
    inputField = false,
    vertical = false,
    before,
    after,
    thumbLabels,
    thumbContent,
    tooltipContent = (value2) => value2,
    labelClassName,
    trackStyle,
    trackContainerStyle,
    trackBgGradientSupport,
    noActiveHighlight,
    markerStep = step,
    flat,
    hidden,
    ...other
  } = props;
  if (hidden) {
    return null;
  }
  let startPoint = rawStartPoint;
  if (Array.isArray(value) && rawStartPoint) {
    startPoint = null;
  }
  let generatedMarkers = {};
  if (typeof markers === "object" && Object.keys(markers).length > 0) {
    generatedMarkers = markers;
  }
  if (markers === true || markers === "dots") {
    generatedMarkers = generateMarkers(min, max, markerStep);
  }
  const markerEntries = Object.entries(generatedMarkers).toSorted((a, b) => parseFloat(a[0]) - parseFloat(b[0]));
  const markerData = vertical ? markerEntries.toReversed() : markerEntries;
  const isRange = Array.isArray(value);
  return /* @__PURE__ */ jsx(
    $6f909507e6374d18$export$472062a354075cee,
    {
      value,
      onChange,
      minValue: min,
      maxValue: max,
      step,
      isDisabled: disabled,
      orientation: vertical ? "vertical" : "horizontal",
      className: clsx("es:w-full", markerEntries?.some(([_, value2]) => value2?.length > 0) && "es:pb-3.5"),
      onChangeEnd,
      ...other,
      children: /* @__PURE__ */ jsx(
        BaseControl,
        {
          icon,
          label,
          subtitle,
          help,
          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
            actions,
            (!inputField || inputField && isRange) && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ") }),
            inputField && !isRange && /* @__PURE__ */ jsx(
              NumberPicker,
              {
                "aria-label": label || __("Slider value", "eightshift-ui-components"),
                value,
                onChange,
                min,
                max,
                step,
                size: "small"
              }
            )
          ] }),
          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
          className: labelClassName,
          children: /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-2.5 es:space-y-0!", vertical && "es:flex-col"), children: [
            before && /* @__PURE__ */ jsx(HStack, { children: before }),
            /* @__PURE__ */ jsx($6f909507e6374d18$export$105594979f116971, { className: clsx("es:isolate", vertical && "es:mx-auto es:h-48", !vertical && "es:grow"), children: ({ state }) => {
              const thumbPositions = state.values.map((_, i) => Math.round(state.getThumbPercent(i) * 100));
              let gridTemplate = generateGridTemplate(thumbPositions, startPoint ? [startPoint] : [], { spaceBetween: 3 });
              if (vertical) {
                gridTemplate.reverse();
              }
              const tracks = gridTemplate.map((v) => {
                if (v.startsWith("minmax")) {
                  return parseFloat(v.replace("minmax(0, ", "").replace("fr)", ""));
                }
                if (v.endsWith("fr")) {
                  return parseFloat(v.replace("fr", ""));
                }
                return null;
              });
              const trackIndices = gridTemplate.map((v, index) => {
                if (v.startsWith("minmax") || v.endsWith("fr")) {
                  return index;
                }
                return null;
              }).filter(Boolean);
              const markerIndices = gridTemplate.map((colWidth, index) => {
                if (colWidth === "auto" || colWidth.endsWith("px")) {
                  return index + 1;
                }
                return null;
              }).filter(Boolean);
              if (vertical) {
                markerIndices.reverse();
              }
              return /* @__PURE__ */ jsxs(
                "div",
                {
                  className: clsx("es:grid", trackBgGradientSupport && "es:@container", vertical && "es:justify-items-center es:h-full", !vertical && "es:items-center"),
                  style: {
                    gridTemplateColumns: vertical ? "1fr" : gridTemplate.join(" "),
                    gridTemplateRows: vertical ? gridTemplate.join(" ") : "1fr",
                    ...trackContainerStyle
                  },
                  children: [
                    markers && /* @__PURE__ */ jsx(
                      "div",
                      {
                        className: clsx(
                          "es:flex es:justify-between",
                          !vertical && ["es:w-fill es:self-center", "es:row-1 es:mx-0.75"],
                          vertical && ["es:h-fill es:flex es:flex-col es:justify-self-center", "es:col-1 es:my-0.75"]
                        ),
                        style: {
                          gridColumn: vertical ? null : `1 / span ${gridTemplate.length}`,
                          gridRow: vertical ? `1 / span ${gridTemplate.length}` : null
                        },
                        children: markerData.map(([rawDotValue, labelData], index) => {
                          const dotValue = parseFloat(rawDotValue);
                          let isWithinActiveBar = false;
                          if (isRange) {
                            isWithinActiveBar = dotValue > state.values[0] && dotValue < state.values.at(-1);
                          } else if (startPoint) {
                            if (state.values[0] < startPoint) {
                              isWithinActiveBar = dotValue > state.values[0] && dotValue <= startPoint;
                            } else {
                              isWithinActiveBar = dotValue >= startPoint && dotValue < state.values[0];
                            }
                          } else {
                            isWithinActiveBar = dotValue < state.values[0];
                          }
                          return /* @__PURE__ */ jsx(
                            "div",
                            {
                              className: clsx(
                                "es:relative",
                                "es:size-0.75 es:place-self-center es:rounded-2xl",
                                !disabled && isWithinActiveBar && "es:bg-accent-50",
                                !disabled && !isWithinActiveBar && "es:bg-surface-500",
                                disabled && isWithinActiveBar && "es:bg-secondary-300",
                                disabled && !isWithinActiveBar && "es:bg-secondary-400",
                                state.values.includes(dotValue) && "es:opacity-0"
                              ),
                              children: /* @__PURE__ */ jsx(
                                "span",
                                {
                                  className: clsx(
                                    "es:absolute es:transition",
                                    !vertical && "es:top-5 es:-translate-x-1/4 es:-rotate-90 es:text-end",
                                    vertical && "es:left-5 es:-translate-y-1/4 es:text-start",
                                    "es:select-none es:text-10 es:tracking-wide es:tabular-nums",
                                    isWithinActiveBar ? "es:text-surface-400" : "es:text-surface-300",
                                    disabled && "es:opacity-0"
                                  ),
                                  children: markers && markers !== "dots" && labelData
                                }
                              )
                            },
                            index
                          );
                        })
                      }
                    ),
                    state.values.map((_, i) => {
                      return /* @__PURE__ */ jsxs(
                        $6f909507e6374d18$export$2c1b491743890dec,
                        {
                          index: i,
                          "aria-label": thumbLabels?.[i],
                          className: clsx(
                            !vertical && ["es:h-10 es:w-0.75", "es:row-1"],
                            vertical && ["es:w-10 es:h-0.75", "es:col-1"],
                            "es:z-20",
                            "es:static! es:rounded-md es:transition es:duration-300",
                            "es:origin-center",
                            "es:hover:ring-[0.25px] es:focus-visible:ring-[0.5px] es:dragging:ring-[1px] es:ring-accent-500",
                            "es:transform-none!",
                            "es:dragging:es:bg-accent-600 es:disabled:bg-secondary-400",
                            "es:focus-visible:outline-2 es:outline-offset-2 es:outline-accent-500/40",
                            "es:bg-accent-500",
                            "es:hover:ring-accent-600",
                            "es:dragging:bg-accent-600 es:dragging:ring-accent-600",
                            !disabled && "es:hover:not-dragging:cursor-grab",
                            "es:justify-self-center",
                            !flat && !disabled && "es:shadow-xs es:shadow-black/5"
                          ),
                          style: {
                            gridColumn: vertical ? null : markerIndices[i],
                            gridRow: vertical ? markerIndices[i] : null
                          },
                          children: [
                            thumbContent && thumbContent(i),
                            /* @__PURE__ */ jsx(AnimatePresence, { children: i === state.focusedThumb && /* @__PURE__ */ jsx(
                              motion.div,
                              {
                                className: clsx(
                                  "es:absolute es:text-nowrap es:w-fit es:min-w-5 es:h-6",
                                  !vertical && "es:bottom-12 es:-translate-x-1/2",
                                  vertical && "es:left-12 es:-translate-y-1/2",
                                  "es:bg-surface-50/80 es:text-surface-700",
                                  "es:backdrop-blur-xs",
                                  "es:text-12 es:leading-none",
                                  "es:py-1 es:px-2 es:rounded-lg",
                                  "es:text-center",
                                  "es:line-clamp-1",
                                  "es:flex es:items-center es:justify-center es:gap-1",
                                  "es:shadow",
                                  "es:icon:size-2 es:icon:stroke-3"
                                ),
                                initial: { y: 2, opacity: 0, scale: 0.85 },
                                animate: { y: 0, opacity: 1, scale: 1 },
                                exit: { y: 6, opacity: 0, scale: 0.85 },
                                children: tooltipContent(state.values[i])
                              }
                            ) })
                          ]
                        },
                        i
                      );
                    }),
                    gridTemplate.map((colWidth, i) => {
                      if (colWidth === "auto" || colWidth.endsWith("px")) {
                        return null;
                      }
                      if (colWidth.endsWith("rem")) {
                        return null;
                      }
                      let val = i + 1;
                      let activeStyle = [
                        "es:transition es:duration-300",
                        !flat && !disabled && "es:shadow-xs es:shadow-black/5",
                        !disabled && [
                          "es:bg-accent-500 es:from-accent-100/15 es:to-accent-100/0 es:from-25%",
                          vertical ? "es:bg-linear-to-r" : "es:bg-linear-to-b",
                          "es:inset-ring es:inset-ring-accent-700/10",
                          "es:inset-shadow-sm es:inset-shadow-accent-50/30"
                        ],
                        disabled && "es:bg-secondary-400"
                      ];
                      const inactiveStyle = [
                        !disabled && [
                          "es:bg-surface-200",
                          vertical ? "es:bg-linear-to-r" : "es:bg-linear-to-b",
                          "es:from-surface-700/0 es:to-surface-700/5 es:from-25%",
                          "es:inset-ring es:inset-ring-surface-300/20"
                        ],
                        disabled && "es:bg-secondary-200"
                      ];
                      if (noActiveHighlight) {
                        activeStyle = inactiveStyle;
                      }
                      const extraStyles = {};
                      if (trackBgGradientSupport) {
                        let bgOffset = 0;
                        if (i === trackIndices.at(-1)) {
                          bgOffset = 100;
                        } else if (i > 0) {
                          bgOffset = tracks.slice(0, startPoint && state.values[0] > startPoint ? i + 1 : i).reduce((acc, val2) => val2 ? acc + val2 : acc, 0);
                        }
                        extraStyles.backgroundSize = "100cqw 100%";
                        extraStyles.backgroundPositionX = `${bgOffset}%`;
                      }
                      return /* @__PURE__ */ jsx(
                        "div",
                        {
                          className: clsx(
                            "es:rounded-sm",
                            "es:transition es:duration-300 es:ease-spring-smooth",
                            !flat && !disabled && "es:shadow-xs es:shadow-black/5",
                            !vertical && [
                              "es:h-6 es:row-1",
                              i === 0 && "es:rounded-l-xl",
                              i === gridTemplate.length - 1 && "es:rounded-r-xl",
                              !isRange && [
                                !startPoint && [state.values[0] > min && i < markerIndices[0] && activeStyle, i > markerIndices[0] && inactiveStyle],
                                startPoint && [
                                  state.values[0] < startPoint && i === markerIndices[0] + 1 && activeStyle,
                                  state.values[0] > startPoint && i === markerIndices[0] - 3 && activeStyle,
                                  state.values[0] <= startPoint && i !== markerIndices[0] + 1 && inactiveStyle,
                                  state.values[0] >= startPoint && i !== markerIndices[0] - 3 && inactiveStyle
                                ]
                              ],
                              isRange && [i > markerIndices[0] && i < markerIndices.at(-1) && activeStyle, (i < markerIndices[0] || i > markerIndices.at(-1)) && inactiveStyle]
                            ],
                            vertical && [
                              "es:w-6 es:col-1",
                              i === 0 && "es:rounded-t-xl",
                              i === gridTemplate.length - 1 && "es:rounded-b-xl",
                              !isRange && [
                                !startPoint && [state.values[0] > min && i > markerIndices[0] && activeStyle, i < markerIndices.at(-1) && inactiveStyle],
                                startPoint && [
                                  state.values.at(-1) > startPoint && i === markerIndices.at(-1) + 1 && activeStyle,
                                  state.values.at(-1) < startPoint && i === markerIndices.at(-1) - 3 && activeStyle,
                                  state.values.at(-1) >= startPoint && i !== markerIndices.at(-1) + 1 && inactiveStyle,
                                  state.values.at(-1) <= startPoint && i !== markerIndices.at(-1) - 3 && inactiveStyle
                                ]
                              ],
                              isRange && [i < markerIndices[0] && i > markerIndices.at(-1) && activeStyle, (i > markerIndices[0] || i < markerIndices.at(-1)) && inactiveStyle]
                            ]
                          ),
                          style: {
                            gridColumn: vertical ? null : val,
                            gridRow: vertical ? val : null,
                            ...extraStyles,
                            ...trackStyle
                          }
                        },
                        i
                      );
                    })
                  ]
                }
              );
            } }),
            after && /* @__PURE__ */ jsx(HStack, { children: after })
          ] })
        }
      )
    }
  );
};
export {
  Slider
};
