import { mergeProps } from 'zag-ripple';
import { trackSplit, track } from 'ripple';
import { useSegmentGroupContext } from './use-segment-group-context';
import { SegmentGroupItemApiContext } from './use-segment-group-item-context';
import { SegmentGroupItemPropsContext } from './use-segment-group-item-props-context';
import { ark } from '../factory';
import type { HTMLProps, MaybeTracked, PolymorphicProps } from '../../types';

export interface SegmentGroupItemBaseProps extends PolymorphicProps<'label'> {
  value: string;
  disabled?: boolean;
  invalid?: boolean;
}
export interface SegmentGroupItemProps extends HTMLProps<'label'>, SegmentGroupItemBaseProps {}

export component SegmentGroupItem(props: MaybeTracked<SegmentGroupItemProps>) {
  const [children, value, disabled, invalid, localProps] = trackSplit(props, [
    'children',
    'value',
    'disabled',
    'invalid',
  ]);
  const segmentGroup = useSegmentGroupContext();

  const itemProps = track(() => ({ value: @value, disabled: @disabled, invalid: @invalid }));
  const itemState = track(() => @segmentGroup.getItemState(@itemProps));

  SegmentGroupItemApiContext.set(itemState);
  SegmentGroupItemPropsContext.set(itemProps);

  let mergedProps = track(() => mergeProps(@segmentGroup.getItemProps(@itemProps), @localProps));

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