import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import {
  openProfileHoverCard,
  closeProfileHoverCard,
} from 'soapbox/actions/profile_hover_card';
import { useDispatch } from 'react-redux';
import { debounce } from 'lodash';
import { isMobile } from 'soapbox/is_mobile';

const showProfileHoverCard = debounce((dispatch, ref, accountId) => {
  dispatch(openProfileHoverCard(ref, accountId));
}, 1200);

const handleMouseEnter = (dispatch, ref, accountId) => {
  return e => {
    if (!isMobile(window.innerWidth))
      showProfileHoverCard(dispatch, ref, accountId);
  };
};

const handleMouseLeave = (dispatch) => {
  return e => {
    showProfileHoverCard.cancel();
    setTimeout(() => dispatch(closeProfileHoverCard()), 300);
  };
};

export const HoverRefWrapper = ({ accountId, children }) => {
  const dispatch = useDispatch();
  const ref = useRef();

  return (
    <div
      ref={ref}
      className='hover-ref-wrapper'
      onMouseEnter={handleMouseEnter(dispatch, ref, accountId)}
      onMouseLeave={handleMouseLeave(dispatch)}
    >
      {children}
    </div>
  );
};

HoverRefWrapper.propTypes = {
  accountId: PropTypes.string,
  children: PropTypes.node,
};

export default HoverRefWrapper;