import { mergeProps } from 'zag-ripple';
import { trackSplit, track } from 'ripple';
import { useId } from '../../utils/use-id';
import { useSelectContext } from './use-select-context';
import { SelectItemGroupPropsContext } from './use-select-item-group-props-context';
import { ark } from '../factory';
import type { HTMLProps, MaybeTracked, PolymorphicProps } from '../../types';

export interface SelectItemGroupBaseProps extends PolymorphicProps<'div'> {}
export interface SelectItemGroupProps extends HTMLProps<'div'>, SelectItemGroupBaseProps {}

export component SelectItemGroup(props: MaybeTracked<SelectItemGroupProps>) {
  const [propId, children, localProps] = trackSplit(props, ['id', 'children']);
  const id = useId();
  const select = useSelectContext();

  const groupProps = track(() => ({ id: @propId ?? id }));
  let mergedProps = track(() => mergeProps(@select.getItemGroupProps(groupProps), @localProps));

  SelectItemGroupPropsContext.set(groupProps);

  <ark.div {...@mergedProps}>
    <@children />
  </ark.div>
}