import React, {ReactNode} from 'react';
import {StyleProp, TextStyle, ViewStyle} from 'react-native';
import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated';
import Text from '@components/Text';
import {COLORS} from '@shared/colors';
import {COMMON_ANIMATION_DURATION} from '@shared/constants';

import {styles} from './styles';

interface Props {
  visible: boolean;
  text: string;
  contrainerStyle?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  children?: ReactNode;
  animationTime?: number;
}

/**
 * @deprecated Use `_HuGo/Tooltip` instead
 */
function Tooltip({
  visible,
  text,
  contrainerStyle,
  textStyle,
  children,
  animationTime,
}: Props) {
  const animatedStyle = useAnimatedStyle(
    () => ({
      opacity: withTiming(visible ? 1 : 0, {
        duration: animationTime || COMMON_ANIMATION_DURATION,
      }),
    }),
    [visible],
  );
  return (
    <Animated.View
      style={[styles.animatedContainer, animatedStyle, contrainerStyle]}>
      <Text color={COLORS.WHITE} style={[styles.tooltipText, textStyle]}>
        {text}
      </Text>
      {children}
    </Animated.View>
  );
}

export default Tooltip;