import * as sliderMachine from "@zag-js/slider";
import type { MachineInput } from "marko-zag";
import { cn } from "#lib/utils.ts";
import { stripOwnProps } from "#lib/native-attrs.ts";
import { slider as styles } from "./classes.ts";

export type Input = MachineInput<"div", sliderMachine.Props> & {
  valueChange?: (value: number[]) => void;
};

<zag/api=() => sliderMachine from=input/>

<const/nativeAttrs=() =>
  stripOwnProps(sliderMachine.splitProps(input)[1], "class", "valueChange")
>

<div
  ...nativeAttrs()
  ...api().getRootProps()
  data-slot="slider"
  class=cn(styles.root, input.class)
>
  // zag-required control wrapper (no upstream counterpart; style CSS never
  // targets it). Mirrors the root's orientation utilities so vertical works
  // through the extra layer.
  <div ...api().getControlProps() data-slot="slider-control" class=styles.control>
    <div ...api().getTrackProps() data-slot="slider-track" class=styles.track>
      <div ...api().getRangeProps() data-slot="slider-range" class=styles.range></div>
    </div>
    <for|_, i| of=api().value>
      <input type="text" ...api().getHiddenInputProps({ index: i })>
      <div ...api().getThumbProps({ index: i }) data-slot="slider-thumb" class=styles.thumb></div>
    </for>
  </div>
</div>

<return=api>