import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { composeRefs, userRef } from "../../internals/compose-refs.jsx";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { useScrollAreaRootContext } from "../root/scroll-area-root-context.jsx";
import { useScrollAreaScrollbarContext } from "../scrollbar/scroll-area-scrollbar-context.jsx";
import { ScrollAreaScrollbarCssVars } from "../scrollbar/scroll-area-scrollbar-css-vars.jsx";
import { ScrollAreaThumbDataAttributes } from "./scroll-area-thumb-data-attributes.jsx";
/**
 * The draggable thumb of the scrollbar. Renders a `<div>` element (or `as`
 * override).
 *
 * §1 wave 3: replaces `renderElement` with `dynamic(() => props.as ?? "div")`.
 * The legacy `stateAttributesMapping` (which projected `orientation`) is
 * inlined as a reactive getter on the internal slot bag.
 */
export function ScrollAreaThumb(props) {
  const root = useScrollAreaRootContext();
  const scrollbar = useScrollAreaScrollbarContext();
  const userStyling = resolveClassStyle(props, () => ({
    orientation: scrollbar.orientation
  }));
  const userProps = omit(props, "class", "style", "attrs", "as");
  const localRef = el => {
    if (scrollbar.orientation === "vertical") {
      root.thumbYRef.current = el;
    } else {
      root.thumbXRef.current = el;
    }
  };
  const internalSlot = {
    [ScrollAreaThumbDataAttributes.orientation]: scrollbar.orientation,
    onPointerDown: event => {
      root.handlePointerDown(event);
    },
    onPointerMove: event => {
      root.handlePointerMove(event);
    },
    onPointerUp: event => {
      if (scrollbar.orientation === "vertical") {
        root.setScrollingY(false);
      } else {
        root.setScrollingX(false);
      }
      root.handlePointerUp(event);
    },
    get style() {
      const base = {};
      if (!root.hasMeasuredScrollbar()) {
        base.visibility = "hidden";
      }
      if (scrollbar.orientation === "vertical") {
        base.height = `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`;
      } else {
        base.width = `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`;
      }
      return base;
    }
  };
  const styledUserProps = mergeRootProps(userStyling, userProps);
  const merged = mergeRootProps(internalSlot, styledUserProps);
  const Tag = dynamic(() => props.as ?? "div");
  return <Tag {...merged} ref={composeRefs(localRef, userRef(props))} />;
}
//# sourceMappingURL=scroll-area-thumb.jsx.map