import * as numberInputMachine from "@zag-js/number-input";
import type { MachineInput } from "marko-zag";
import Icon from "../icon/icon.marko";
import { cn } from "#lib/utils.ts";
import { stripOwnProps } from "#lib/native-attrs.ts";
import { numberInput as styles } from "./classes.ts";

export type Input = MachineInput<"input", numberInputMachine.Props> & {
  valueChange?: (value: string) => void;
};

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

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

<div
  ...api().getRootProps()
  data-slot="number-input"
  class=cn(styles.root, input.class)
>
  <button type="button"
    ...api().getDecrementTriggerProps()
    data-slot="number-input-decrement"
    class=styles.decrement
  >
    <Icon name="Minus" class=styles.icon/>
  </button>
  <div ...api().getControlProps() data-slot="number-input-control" class=styles.control>
    <input type="text"
      ...nativeAttrs()
      ...api().getInputProps()
      data-slot="number-input-field"
      class=styles.field
    />
    <div
      ...api().getScrubberProps()
      data-slot="number-input-scrubber"
      class=styles.scrubber
    />
  </div>
  <button type="button"
    ...api().getIncrementTriggerProps()
    data-slot="number-input-increment"
    class=styles.increment
  >
    <Icon name="Plus" class=styles.icon/>
  </button>
</div>

<return=api>