import React, {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconBan} from '@tabler/icons-react-native';
import {Typography} from '@components';
import type {DeletedMessage} from '@modules/chats/interfaces';
import {MessageItem} from '@modules/chats/components';
import {buildDeletedMessageAccessibilityLabel} from '@modules/chats/utils';
import {ICON_SIZES, useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  item: DeletedMessage;
}

function DeletedMessage({item}: Props) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const accessibilityLabel = buildDeletedMessageAccessibilityLabel({
    isSentByCurrentUser: item.isSentByCurrentUser,
    senderName: item.data.username,
    ts: item.data.ts,
  });

  return (
    <MessageItem
      item={item}
      accessible={true}
      accessibilityLabel={accessibilityLabel}
      accessibilityRole="text">
      <MessageItem.Row>
        <MessageItem.Avatar />
        <MessageItem.Bubble>
          <View style={styles.bubble} accessible={false}>
            <IconBan size={ICON_SIZES.x4} color={theme.text.neutral.lighter} />
            <Typography
              variant="s"
              color={theme.text.neutral.lighter}
              fontStyle="italic">
              {t(
                item.isSentByCurrentUser
                  ? 'chat.delete.message_deleted_you'
                  : 'chat.delete.message_deleted_user',
              )}
            </Typography>
          </View>
          <MessageItem.Footer />
        </MessageItem.Bubble>
      </MessageItem.Row>
    </MessageItem>
  );
}

export default memo(DeletedMessage);
