import React, { FC, useCallback, useRef, Ref } from 'react';
import useKey from '@rooks/use-key';
import { Tooltip, TooltipComponent } from '../Tooltip';
import * as sc from './styles';

type TooltipProps = React.ComponentProps<typeof Tooltip>;

export const Dropdown: FC<TooltipProps> = ({ ...otherProps }) => {
  const tooltipRef: Ref<typeof TooltipComponent | null> = useRef(null);
  const handleKeyPress = useCallback((e) => {
    e.preventDefault();
  }, []);

  useKey([27], handleKeyPress, {
    when: true,
    eventTypes: ['keydown'],
  });

  return (
    <sc.Tooltip
      ref={tooltipRef}
      variant="raw"
      trigger="click"
      closeOnClickOutside
      {...otherProps}
    />
  );
};
