import React, { useState, useEffect, useRef } from 'react';
import { usePopper } from 'react-popper';

export interface ITooltip {
  children: React.ReactNode;
  className?: string;
  title: string;
  placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left';
  style?: React.CSSProperties;
  [x: string]: any;
}

export const Tooltip: React.FC<ITooltip> = (props) => {
  const { children, className, placement = 'top', style, title, ...otherProps } = props;
  const refTooltip = useRef(null);
  const [visible, setVisible] = useState(false);
  const [referenceElement, setReferenceElement] = useState(null);
  const [popperElement, setPopperElement] = useState(null);
  const [arrowElement, setArrowElement] = useState(null);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: placement,
    modifiers: [
      { name: 'arrow', options: { element: arrowElement } },
      {
        name: 'offset',
        options: {
          offset: [0, 5],
        },
      },
    ],
  });

  const toggleTooltip = () => setVisible(!visible);
  const showTooltip = () => setVisible(true);
  const hideTooltip = () => setVisible(false);

  const getContainerClassNames = (className: string): string => {
    let classList = 'b-tooltip-container';
    if (className) classList += ` ${className}`;
    return classList;
  };

  const getTitleClassNames = (visible: boolean): string => {
    let classList = 'b-tooltip';
    if (visible) classList += ` is-visible`;
    return classList;
  };

  useEffect(() => {
    setReferenceElement(refTooltip.current);
  }, []);

  return (
    <div ref={refTooltip} className={getContainerClassNames(className)} style={style} {...otherProps}>
      <div ref={setPopperElement} style={styles.popper} {...attributes.popper} className={getTitleClassNames(visible)}>
        {title}
        <div ref={setArrowElement} style={styles.arrow} className="b-tooltip-arrow" />
      </div>
      <div onFocus={showTooltip} onMouseOver={showTooltip} onMouseOut={hideTooltip} onTouchEnd={toggleTooltip} onBlur={hideTooltip} className="b-tooltip-children">
        {children}
      </div>
    </div>
  );
};