import React from 'react';
import { Info } from 'phosphor-react-native';
import { StyleSheet } from 'react-native';
import RNTooltip from 'rn-tooltip';
import { Normalize } from '../../utils/normalize';
import { colors, fonts } from '../../theme/theme';
import { Box } from '../Box';
import { Text } from '../Text';

interface IProps {
  title: string;
  message?: string;
}

export const Tooltip = ({ title, message = '' }: IProps) => {
  return (
    <RNTooltip
      actionType="press"
      backgroundColor={colors.yankeesBlue}
      width={Normalize(228)}
      height={Normalize(62)}
      containerStyle={styles.container}
      withOverlay={false}
      popover={
        <Box>
          <Text
            color="white"
            variant="body"
            lineHeight={Normalize(16)}
            fontFamily={fonts.caustenRoundBold}
            ellipsizeMode="tail"
            numberOfLines={1}
          >
            {title}
          </Text>
          <Text
            variant="label"
            color="white"
            ellipsizeMode="tail"
            numberOfLines={2}
          >
            {message}
          </Text>
        </Box>
      }
    >
      <Box
        alignItems="center"
        justifyContent="center"
        paddingHorizontal="spacing-xxxs"
      >
        <Info size={13} color={colors.brightYellow} weight="fill" />
      </Box>
    </RNTooltip>
  );
};

const styles = StyleSheet.create({
  container: {
    borderRadius: 4,
  },
});