import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useSliderContext } from "./slider-context";

/** Props for Slider.Range — same as div attributes. */
export type SliderRangeProps = JSX.HTMLAttributes<HTMLDivElement>;

/** The filled portion of the slider track representing the current value. */
export function SliderRange(props: SliderRangeProps): JSX.Element {
  const [local, rest] = splitProps(props, ["style"]);
  const ctx = useSliderContext();

  const percentage = () => {
    const range = ctx.max() - ctx.min();
    if (range === 0) return 0;
    return ((ctx.value() - ctx.min()) / range) * 100;
  };

  const computedStyle = () =>
    ctx.orientation() === "horizontal"
      ? { width: `${percentage()}%` }
      : { height: `${percentage()}%` };

  const mergedStyle = () => ({
    ...(typeof local.style === "object" ? local.style : {}),
    ...computedStyle(),
  });

  return <div style={mergedStyle()} data-orientation={ctx.orientation()} {...rest} />;
}