import type { JSX } from "solid-js";
import { splitProps } from "solid-js";

export interface DropdownMenuCheckboxItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
  /** Whether the checkbox is checked. */
  checked: boolean;
  /** Called when checked state changes. */
  onCheckedChange?: ((checked: boolean) => void) | undefined;
  /** Whether this item is disabled. */
  disabled?: boolean | undefined;
  children?: JSX.Element;
}

/** A menu item that toggles a boolean checked state. */
export function DropdownMenuCheckboxItem(props: DropdownMenuCheckboxItemProps): JSX.Element {
  const [local, rest] = splitProps(props, [
    "checked",
    "onCheckedChange",
    "disabled",
    "children",
  ]);

  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = () => {
    if (local.disabled) return;
    local.onCheckedChange?.(!local.checked);
  };

  return (
    <div
      role="menuitemcheckbox"
      aria-checked={local.checked}
      aria-disabled={local.disabled || undefined}
      data-disabled={local.disabled || undefined}
      data-state={local.checked ? "checked" : "unchecked"}
      onClick={handleClick}
      {...rest}
    >
      {local.children}
    </div>
  );
}
