import { trackSplit, track, effect } from 'ripple';
import type { MaybeTracked } from '../../types';
import { MenuApiContext, useMenuContext } from './use-menu-context';
import { MenuMachineContext, useMenuMachineContext } from './use-menu-machine-context';
import { MenuTriggerItemContext } from './use-menu-trigger-item-context';
import { PresenceApiContext } from '../presence/use-presence-context';
import { splitPresenceProps } from '../presence/split-presence-props.ripple';
import { usePresence, type UsePresenceProps } from '../presence/use-presence.ripple';
import { useMenu, type UseMenuProps } from './use-menu.ripple';
import { splitMenuProps } from './split-menu-props.ripple';

export interface MenuRootBaseProps extends UseMenuProps, UsePresenceProps {
  children?: any;
}
export interface MenuRootProps extends MenuRootBaseProps {}

export component MenuRoot(props: MaybeTracked<MenuRootProps>) {
  const [children, rest] = trackSplit(props, ['children']);
  const [presenceProps, menuProps] = splitPresenceProps(@rest);
  const [useMenuProps, localProps] = splitMenuProps(@menuProps);

  const parentApi = useMenuContext();
  const parentMachine = useMenuMachineContext();
  const { api, service } = useMenu(useMenuProps);

  const present = track(() => @api.open);
  const presence = usePresence({ present, ...@presenceProps });

  effect(() => {
    const _parentService = @parentMachine;
    const _parentApi = @parentApi;
    const _childApi = @api;

    if (!_parentService || !_parentApi) return;

    _parentApi.setChild(service);
    _childApi.setParent(_parentService);
  });

  const triggerItemContext = () => @parentApi?.getTriggerItemProps(@api);

  MenuTriggerItemContext.set(triggerItemContext);
  MenuMachineContext.set(service);
  MenuApiContext.set(api);
  PresenceApiContext.set(presence);

  <@children />
}