import React, {ReactNode, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {IconInfoCircle} from '@tabler/icons-react-native';
import {Typography} from '@components/_core/Typography';
import {IconButton, ButtonSize} from '@components/_HuGo/Button';
import {Dialog} from '@components/_HuGo/Dialog';
import {SPACING} from '@shared/theme';

import {styles} from './styles';

interface Props {
  info?: string;
  title?: string;
  iconSize?: ButtonSize;
  children?: ReactNode;
}

export function Tooltip({info, title, iconSize = 'sm', children}: Props) {
  const {t} = useTranslation();
  const [showModal, setShowModal] = useState(false);

  const onPress = () => setShowModal(true);

  const onClose = () => setShowModal(false);

  return (
    <>
      <IconButton
        Icon={IconInfoCircle}
        onPress={onPress}
        size={iconSize}
        variant="tertiary"
        hitSlop={SPACING.x2}
      />
      <Dialog
        isVisible={showModal}
        onClose={onClose}
        title={title || t('general.more_info')}
        footer={{
          secondaryButton: {
            text: t('general.close'),
            onPress: onClose,
          },
        }}>
        {!!info && <Typography style={styles.text}>{info}</Typography>}
        {children}
      </Dialog>
    </>
  );
}