/**
 * `<Menu.CheckboxItem>` — a toggleable menu item. Mirrors React.
 */

import { dynamic } from "@solidjs/web";
import { createMemo, omit } from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id.jsx";
import { createChangeEventDetails, REASONS } from "../../internals/change-event-details.jsx";
import { composeRefs, userRef } from "../../internals/compose-refs.jsx";
import { useCompositeListItem } from "../../internals/composite/composite-list.jsx";
import { createControlledState } from "../../internals/create-controlled-state.jsx";
import { useFloatingParentNodeId } from "../../internals/floating-ui/components/floating-tree.jsx";
import { mergeRootProps } from "../../internals/merge-root-props.jsx";
import { resolveClassStyle } from "../../internals/resolve-class-style.jsx";
import { useButton } from "../../internals/use-button/use-button.jsx";
import { useMenuRootContext } from "../root/menu-root-context.jsx";
import { createItemHoverEmitter } from "../utils/item-hover.jsx";
import { MenuCheckboxItemContext } from "./menu-checkbox-item-context.jsx";
export function MenuCheckboxItem(props) {
  const root = useMenuRootContext();
  const emitItemHover = createItemHoverEmitter(root, useFloatingParentNodeId());
  const fallbackId = useBaseUiId();
  const id = () => typeof props.id === "string" ? props.id : fallbackId;
  const disabled = () => Boolean(props.disabled);
  const closeOnClick = () => props.closeOnClick ?? false;
  const nativeButton = () => props.nativeButton ?? false;
  const listItem = useCompositeListItem({
    label: props.label
  });
  const highlighted = createMemo(() => root.activeIndex() === listItem.index());

  // Controlled / uncontrolled checked state (Base UI `checked` /
  // `defaultChecked` contract): the `checked` prop wins while defined;
  // otherwise an internal signal (seeded once from `defaultChecked`)
  // backs the state and `setChecked` writes it.
  const [checked, setUncontrolledChecked] = createControlledState({
    controlled: () => props.checked === undefined ? undefined : Boolean(props.checked),
    default: () => props.defaultChecked,
    fallback: false,
    name: "<Menu.CheckboxItem>",
    state: "checked"
  });

  // Base UI change flow: fire `onCheckedChange`, honor `details.cancel()`,
  // then write the uncontrolled state (inert while controlled).
  const setChecked = (next, details) => {
    props.onCheckedChange?.(next, details);
    if (details.isCanceled) return;
    setUncontrolledChecked(next);
  };
  const {
    props: buttonProps,
    ref: buttonRef
  } = useButton({
    disabled,
    focusableWhenDisabled: () => true,
    native: nativeButton,
    composite: () => true
  });
  const state = createMemo(() => ({
    disabled: disabled(),
    highlighted: highlighted(),
    checked: checked()
  }));
  const contextValue = {
    checked,
    disabled,
    highlighted
  };
  const internal = {
    get id() {
      return id();
    },
    role: "menuitemcheckbox",
    get "aria-checked"() {
      return checked() ? "true" : "false";
    },
    get tabindex() {
      return highlighted() ? 0 : -1;
    },
    onKeyDown(event) {
      if (event.key === " " && root.typingRef.current) {
        event.preventDefault();
      }
    },
    onMouseMove: emitItemHover,
    onClick(event) {
      if (disabled()) return;
      const next = !checked();
      setChecked(next, createChangeEventDetails(REASONS.itemPress, event));
      if (closeOnClick()) {
        root.setOpen(false, createChangeEventDetails(REASONS.itemPress, event));
      }
    },
    get "data-highlighted"() {
      return state().highlighted ? "" : undefined;
    },
    get "data-disabled"() {
      return state().disabled ? "" : undefined;
    },
    get "data-checked"() {
      return state().checked ? "" : undefined;
    },
    get "data-unchecked"() {
      return state().checked ? undefined : "";
    }
  };
  const userClassStyle = resolveClassStyle(props, () => state());
  const userProps = omit(props, "as", "class", "style", "attrs", "children", "id", "checked", "defaultChecked", "onCheckedChange", "disabled", "label", "closeOnClick", "nativeButton");
  let merged = mergeRootProps(root.interactions.getItemProps(), buttonProps);
  merged = mergeRootProps(merged, internal);
  merged = mergeRootProps(merged, userClassStyle);
  merged = mergeRootProps(merged, userProps);
  const Tag = dynamic(() => props.as ?? "div");
  return <Tag {...merged} ref={composeRefs(buttonRef, listItem.ref, userRef(props))}>
			<MenuCheckboxItemContext value={contextValue}>
				{props.children}
			</MenuCheckboxItemContext>
		</Tag>;
}
//# sourceMappingURL=menu-checkbox-item.jsx.map