import React, {useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {DESCRIPTION_TRUNCATION_LIMIT} from '../../../../constants';
import {styles} from './styles';

interface Props {
  description: string;
}

export const WelcomeDescription = ({description}: Props) => {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const [isExpanded, setIsExpanded] = useState(false);

  const shouldTruncate = description.length > DESCRIPTION_TRUNCATION_LIMIT;

  const displayText =
    shouldTruncate && !isExpanded
      ? `${description.slice(0, DESCRIPTION_TRUNCATION_LIMIT)}...`
      : description;

  const onToggle = () => setIsExpanded(prev => !prev);

  return (
    <View>
      <Typography variant="xs" color={theme.text.neutral.lighter}>
        {displayText}
      </Typography>
      {shouldTruncate && (
        <Typography
          variant="xs"
          weight="semiBold"
          color={theme.text.neutral.brand}
          onPress={onToggle}
          style={styles.toggleButton}>
          {t(`general.${isExpanded ? 'see_less' : 'see_more'}`)}
        </Typography>
      )}
    </View>
  );
};