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

type TooltipProps = React.ComponentProps<typeof Tooltip>;

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

  useKey([27], handleKeyPress, {
    when: true,
    eventTypes: ['keydown'],
    target: tooltipRef.current && tooltipRef.current.containerRef,
  });

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