import React from 'react';
import { useButton } from 'react-aria';
import type { ButtonProps, SlotProps } from 'react-aria-components';
import { ButtonContext, useContextProps } from 'react-aria-components';

import type { IconButtonProps } from '../../IconButton/IconButton';
import { IconButton } from '../../IconButton/IconButton';

interface InheritedIconButtonProps extends Omit<IconButtonProps, 'icon' | 'variant' | 'ghost'> {}

export interface TreeItemHandleProps extends InheritedIconButtonProps {}

export function TreeItemHandle(props: TreeItemHandleProps) {
  const handleRef = React.useRef<HTMLButtonElement>(null);

  const [chevronAriaProps, ref] = useContextProps<ButtonProps, SlotProps, HTMLButtonElement>(
    { slot: 'drag' },
    handleRef,
    ButtonContext
  );

  const { buttonProps: handleProps } = useButton(chevronAriaProps, ref);

  return <IconButton {...props} {...handleProps} ref={ref} icon='shp-drag' variant='secondary' ghost />;
}