import React from 'react';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {Avatar, CardContainer, ListRow, Title} from '@components';
import {useConversation} from '@modules/chats/store';
import {getChatAvatar} from '@modules/chats/utils';
import {Screens} from '@shared/constants';

import {ChatActionButtons} from '../ChatActionButtons';
import {styles} from './styles';

interface Props {
  channel: string;
}

export function ImInfo({channel}: Props) {
  const {t} = useTranslation();
  const conversation = useConversation(channel);
  const avatarProps = getChatAvatar(conversation);
  const navigation = useNavigation();
  const otherUserId = conversation?.other_user?.id;

  const onGoToProfilePress = () => {
    if (!otherUserId) return;
    navigation.navigate(Screens.PROFILE, {userId: otherUserId});
  };

  return (
    <>
      <Avatar
        {...avatarProps}
        variant="primary"
        size="xxl"
        style={styles.avatar}
      />
      <Title title={avatarProps.title} center />
      <ChatActionButtons channel={channel} />
      <CardContainer>
        <ListRow onPress={onGoToProfilePress}>
          <ListRow.Avatar variant="primary" />
          <ListRow.Title title={t('chat.go_to_profile')} />
          <ListRow.SideContent withRightIcon />
        </ListRow>
      </CardContainer>
    </>
  );
}
