import { dynamic } from "@solidjs/web";
import { createMemo, omit } from "solid-js";
import { userRef } from "../../internals/compose-refs.jsx";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { useSliderRootContext } from "../slider-root-context.jsx";
import { sliderDataAttrs } from "../utils/state-attrs.jsx";
function formatNumber(value, locale, format) {
  if (!format) return String(value);
  try {
    return new Intl.NumberFormat(locale, format).format(value);
  } catch {
    return String(value);
  }
}

/**
 * Displays the current value of the slider as text. Renders an `<output>`
 * (or `as` override).
 *
 * `htmlFor` is composed from every registered thumb's `inputId` — reading
 * `thumbMap()` subscribes to thumb registrations so the attribute updates when
 * thumbs mount or unmount.
 *
 * §1 wave 3: replaces `renderElement` with `dynamic(() => props.as ?? "output")`.
 */
export function SliderValue(props) {
  const context = useSliderRootContext();
  const outputFor = createMemo(() => {
    let out = "";
    for (const thumbMetadata of context.thumbMap().values()) {
      if (thumbMetadata?.inputId) {
        out += `${thumbMetadata.inputId} `;
      }
    }
    const trimmed = out.trim();
    return trimmed.length === 0 ? undefined : trimmed;
  });
  const formattedValues = createMemo(() => {
    const out = [];
    const format = context.formatOptions();
    const locale = context.locale();
    for (const v of context.values()) {
      out.push(formatNumber(v, locale, format));
    }
    return out;
  });
  const defaultDisplayValue = createMemo(() => {
    return formattedValues().join(" – ");
  });

  // Resolve `class`/`style` here so function values (stateful styling) are
  // invoked with the slider state instead of being spread to the DOM raw.
  const userClassStyle = resolveClassStyle(props, () => context.state());
  // Strip our callback-shape `children` and `aria-live` (re-injected via the
  // internal slot below).
  const userProps = omit(props, "as", "children", "aria-live", "class", "style", "attrs");
  const internalSlot = {
    get "aria-live"() {
      return props["aria-live"] ?? "off";
    },
    // Solid 2 DOM binding uses native attribute name `for`, not
    // React's `htmlFor`. Seed `""` so the key stays in `ownKeys`
    // on render 1 (see
    // `test/internals/merge-props-undefined-attr.test.tsx`).
    get for() {
      return outputFor() ?? "";
    },
    get children() {
      const consumer = props.children;
      if (typeof consumer === "function") {
        return consumer(formattedValues(), context.values());
      }
      return defaultDisplayValue();
    }
  };
  let merged = mergeRootProps(internalSlot, sliderDataAttrs(context.state));
  merged = mergeRootProps(merged, userClassStyle);
  merged = mergeRootProps(merged, userProps);
  const Tag = dynamic(() => props.as ?? "output");
  return <Tag {...merged} ref={userRef(props)} />;
}
//# sourceMappingURL=slider-value.jsx.map