import React, {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconAlertCircle} from '@tabler/icons-react-native';
import {TypographyWithLinks} from '@components';
import {MESSAGE_TEXT_STYLES} from '@modules/chats/utils/measuring';
import {UnsupportedMessage as UnsupportedMessageType} from '@modules/chats/interfaces';
import {MessageItem} from '@modules/chats/components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  item: UnsupportedMessageType;
}

function UnsupportedMessage({item}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  return (
    <MessageItem item={item}>
      <MessageItem.Row>
        <MessageItem.Avatar />
        <MessageItem.Bubble>
          <View style={styles.bubble}>
            <IconAlertCircle
              size={iconSizes.x5}
              color={theme.text.neutral.lighter}
            />
            <TypographyWithLinks
              variant="xs"
              color={theme.text.neutral.lighter}
              allowFontScaling={false}
              maxFontSizeMultiplier={100}
              fontStyle="italic"
              textBreakStrategy="simple"
              style={MESSAGE_TEXT_STYLES}
              value={t('chat.messages.unsupported')}
            />
          </View>
        </MessageItem.Bubble>
      </MessageItem.Row>
    </MessageItem>
  );
}

export default memo(UnsupportedMessage);
