import React from 'react';
import { Manager, Reference, Popper } from 'react-popper';

import { TargetWrapper, TooltipContainer, Arrow } from './styled';
import Portal from '../Portal';

type Props = {
  anchor?: 'left' | 'right' | 'top' | 'bottom';
  children: React.ReactNode;
  content: React.ReactNode;
};

const Tooltip: React.FC<Props> = ({
  anchor = 'left',
  children,
  content,
}: Props) => (
  <Manager>
    <Reference>
      {({ ref }): React.ReactElement => (
        <TargetWrapper ref={ref}>{children}</TargetWrapper>
      )}
    </Reference>
    <Portal>
      <Popper placement={anchor}>
        {({ ref, style, placement, arrowProps }): React.ReactElement => (
          <TooltipContainer ref={ref} style={style} data-placement={placement}>
            {content}
            <Arrow
              data-placement={placement}
              ref={arrowProps.ref}
              style={arrowProps.style}
            />
          </TooltipContainer>
        )}
      </Popper>
    </Portal>
  </Manager>
);

export default Tooltip;