import React from 'react';
import { Normalize } from '../../utils/normalize';
import RNTooltip from 'rn-tooltip';
import { useTheme } from '../../theme/ThemeProvider';
import { Text } from '../Text';
import { Box } from '../Box';
import { Info } from 'phosphor-react-native';

export const DisabledCardTooltip = ({
  message = '',
  title,
  width = 328,
  height = 84,
}: {
  message: string;
  title?: string;
  width?: number | string;
  height?: number | string;
}) => {
  const { fonts, colors } = useTheme();
  return (
    <RNTooltip
      actionType="press"
      backgroundColor={colors.white}
      width={typeof width === 'number' ? Normalize(width) : width}
      height={typeof height === 'number' ? Normalize(height) : height}
      // eslint-disable-next-line react-native/no-inline-styles
      containerStyle={{
        borderRadius: 4,
        transform: [{ translateX: 9 }],
        paddingLeft: Normalize(16),
        alignItems: 'flex-start',
      }}
      overlayColor={'rgba(43, 40, 69, 0.4)'}
      withOverlay={true}
      popover={
        <Box>
          {title ? (
            <Text
              variant="H4"
              fontFamily={fonts.caustenRoundBold}
              color="yankeesBlue"
              ellipsizeMode="tail"
              numberOfLines={1}
              textAlign="left"
            >
              {title}
            </Text>
          ) : null}
          <Text
            variant="body"
            color="yankeesBlue"
            ellipsizeMode="tail"
            numberOfLines={1}
            textAlign="left"
          >
            {message}
          </Text>
        </Box>
      }
    >
      <Box
        alignItems="center"
        justifyContent="center"
        paddingHorizontal="spacing-xxxs"
        zIndex={1}
      >
        <Info size={Normalize(16)} color={colors.yankeesBlue} />
      </Box>
    </RNTooltip>
  );
};