import * as tagsInputMachine from "@zag-js/tags-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 { tagsInput as styles } from "./classes.ts";

export type Input = MachineInput<"div", tagsInputMachine.Props> & {
  valueChange?: (value: string[]) => void;
  inputValueChange?: (inputValue: string) => void;
  highlightedValueChange?: (highlightedValue: string | null) => void;
  label?: string;
  /** Placeholder for the tag entry field (also its accessible-name fallback). */
  placeholder?: string;
};

<zag/api=() => tagsInputMachine from=input
  onHighlightChange(details: tagsInputMachine.HighlightChangeDetails) {
    input.onHighlightChange?.(details);
    input.highlightedValueChange?.(details.highlightedValue);
  }
/>

// `placeholder` belongs on the entry <input type="text">, not the root div. It is a
// machine prop, so `splitProps` already removes it here; it is re-applied
// from `input.placeholder` on that <input type="text"> below.
<const/nativeAttrs=() =>
  stripOwnProps(
    tagsInputMachine.splitProps(input)[1],
    "class",
    "valueChange",
    "inputValueChange",
    "highlightedValueChange",
    "label",
    // `placeholder` is a machine prop, so `splitProps` has already removed it
    // from this leftover object. It is still applied to the entry <input type="text">
    // below from `input.placeholder` (Zag's getInputProps does not emit one).
  )
>

<div ...nativeAttrs() ...api().getRootProps() data-slot="tags-input-root" class=cn(styles.root, input.class)>
  <if=input.label>
    <label ...api().getLabelProps() data-slot="tags-input-label" class=styles.label>${input.label}</label>
  </if>
  <div
    ...api().getControlProps()
    data-slot="tags-input-control"
    class=styles.control
  >
    <for|value, index| of=api().value>
      <span
        ...api().getItemProps({ index, value })
        data-slot="tags-input-item"
        class=styles.item
      >
        <span
          ...api().getItemPreviewProps({ index, value })
          data-slot="tags-input-item-preview"
          class=styles.itemPreview
        >
          <span ...api().getItemTextProps({ index, value }) data-slot="tags-input-item-text">${value}</span>
          <button
            ...api().getItemDeleteTriggerProps({ index, value })
            data-slot="tags-input-item-delete-trigger"
            type="button"
            class=styles.itemDeleteTrigger
          >
            <Icon name="X" class=styles.itemDeleteIcon/>
            <span class=styles.itemDeleteSrOnly>Remove ${value}</span>
          </button>
        </span>
        <input type="text"
          ...api().getItemInputProps({ index, value })
          data-slot="tags-input-item-input"
          class=styles.itemInput
        />
      </span>
    </for>
    <input
      ...api().getInputProps()
      type="text"
      placeholder=input.placeholder
      data-slot="tags-input-input"
      class=styles.input
    />
  </div>
  <input type="text" ...api().getHiddenInputProps()>
</div>

<return=api>