import React, { useContext } from 'react';
import { TooltipContainer, TooltipWrapper, Arrow, TooltipText, TooltipContent } from './styles';
import { ThemeContext } from 'context/context';
import { TextStyle } from 'react-native';

export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';

export interface ITooltipProps {
  /** If true tooltip will be visible */
  show?: boolean;
  /** Position relative to children where the tooltip will be shown  */
  placement?: TooltipPlacement;
  /** A react node that will be shown instead of tooltip text */
  content?: any;
  /** ToolTip inner text */
  text?: string;
  children?: any;
  /** Size of tooltip arrow */
  arrowSize?: number;
  /** Distance between tooltip and children */
  tooltipMargin?: number;
  /** if true there will be no tooltip arrow */
  removeArrow?: boolean
  /** Height of the tooltip */
  tooltipHeight?: string;
  /** Width of the tooltip */
  tooltipWidth?: string;
  /** Styles fot the tooltip text */
  customTextStyle?: TextStyle;
}

export const AtomTooltip = ({
  show,
  text = '',
  placement = 'top',
  arrowSize = 6,
  tooltipMargin = 5,
  removeArrow = false,
  tooltipHeight = 'auto',
  tooltipWidth = '90px',
  content,
  customTextStyle,
  children,
}: ITooltipProps) => {

  const { fontFamily } = useContext(ThemeContext);
  const [tooltipHeightAuto, setTooltipHeightAuto] = React.useState(0);
  const [tooltipWidthAuto, setTooltipWidthAuto] = React.useState(0);

  const onLayoutTooltip = (event: any) => {
    const { height, width } = event.nativeEvent.layout;
    setTooltipHeightAuto((prevState) => height || prevState);
    setTooltipWidthAuto((prevState) => width || prevState);
  }

  return (
    <TooltipContainer>
      <>
        {children}
        {show && (
          <>
            <TooltipWrapper
              testID='tooltip'
              onLayout={onLayoutTooltip}
              placement={placement}
              removeArrow={removeArrow}
              arrowSize={arrowSize}
              tooltipMargin={tooltipMargin}
              tooltipHeight={tooltipHeightAuto}
              tooltipWidth={tooltipWidthAuto}
            >
              <TooltipContent
                contentHeight={tooltipHeight}
                contentWidth={tooltipWidth}
              >
                {!!content ?
                  content :
                  <TooltipText
                    fontFamily={fontFamily}
                    style={customTextStyle}
                  >{text}</TooltipText>
                }
              </TooltipContent>
            </TooltipWrapper>
            {removeArrow ? null :
              <Arrow
                testID='tooltip-arrow'
                placement={placement}
                removeArrow={removeArrow}
                arrowSize={arrowSize}
                tooltipMargin={tooltipMargin}
                tooltipHeight={tooltipHeightAuto}
                tooltipWidth={tooltipWidthAuto}
              />
            }
          </>
        )}
      </>
    </TooltipContainer>
  );
};
