import { mergeProps } from 'zag-ripple';
import { trackSplit, track } from 'ripple';
import { useSwapContext } from './use-swap-context';
import { ark } from '../factory';
import type { HTMLProps, MaybeTracked, PolymorphicProps } from '../../types';

export interface SwapIndicatorBaseProps extends PolymorphicProps<'span'> {
  type: 'on' | 'off';
}
export interface SwapIndicatorProps extends HTMLProps<'span'>, SwapIndicatorBaseProps {}

export component SwapIndicator(props: MaybeTracked<SwapIndicatorProps>) {
  const [type, children, localProps] = trackSplit(props, ['type', 'children']);

  const swap = useSwapContext();

  const presence = track(() => @type === 'on' ? @swap.onPresence : @swap.offPresence);

  if (@presence.unmounted) {
    return;
  }

  let mergedProps = track(() => mergeProps(@swap.getIndicatorProps({ type: @type }), @localProps));

  <ark.span
    {...@mergedProps}
    {ref (el: HTMLSpanElement | null) => {
      @presence.setNode(el);
    }}
  >
    <@children />
  </ark.span>
}