import React, { useRef } from 'react';
import { mergeProps, useButton, useFocusRing, useHover } from 'react-aria';
import { ButtonContext, useContextProps } from 'react-aria-components';

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

interface DateInputButtonProps extends IconButtonProps {
  slot?: string;
}

export const ConnectedIconButton: React.FC<DateInputButtonProps> = ({ slot: slotProp, ...iconProps }) => {
  const ref = useRef<HTMLButtonElement>(null);

  const [{ slot, ...contextOptions }, contextRef] = useContextProps({ slot: slotProp }, ref, ButtonContext);

  const { buttonProps } = useButton(contextOptions, contextRef);
  const { hoverProps, isHovered } = useHover(contextOptions);
  const { focusProps, isFocused, isFocusVisible } = useFocusRing(contextOptions);

  return (
    <IconButton
      ref={contextRef}
      {...iconProps}
      {...mergeProps(buttonProps, hoverProps, focusProps, { slot })}
      data-hovered={isHovered || undefined}
      data-focused={isFocused || undefined}
      data-focus-visible={isFocusVisible || undefined}
    />
  );
};