import React, {useState} from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconChevronRight, IconLogout} from '@tabler/icons-react-native';
import {Avatar, Title, Typography} from '@components';
import {useGroupInfo} from '@modules/chats/hooks';
import {getChatAvatar, getChatImage} from '@modules/chats/utils';
import {DialogLeaveGroup} from '@modules/chats/components';
import {useShallowConversation} from '@modules/chats/store';
import {useTheme} from '@shared/theme';

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

interface Props {
  channel: string;
}

export function GroupInfo({channel}: Props) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const [showLeaveGroupDialog, setShowLeaveGroupDialog] = useState(false);
  const {isUserAdmin} = useGroupInfo(channel);

  const conversation = useShallowConversation(channel, state => ({
    name: state.name,
    is_channel: !!state.is_channel,
    is_im: state.is_im,
    other_user: state.other_user,
    picture_url: state.picture_url,
    id: state.id,
  }));

  const avatarProps = getChatAvatar(conversation);
  // Big variant: 400 px so the xxl (128 dp) tile stays sharp on 3× DPR
  // devices. The xxl AvatarSize enum is only 128 dp, which up-scaled 3×
  // looks blurry — a raw width override gets us a crisp render.
  // Small variant: matches what the chat list / header request, so the
  // placeholder is already in cache and paints in one frame.
  const bigAvatarUrl = getChatImage.avatar(avatarProps.url, {width: 400});
  const smallAvatarUrl = getChatImage.avatar(avatarProps.url, {
    avatarSize: 'md',
  });

  const onLeaveGroupPress = () => {
    setShowLeaveGroupDialog(true);
  };

  const onCloseLeaveGroupDialog = () => {
    setShowLeaveGroupDialog(false);
  };

  return (
    <>
      <Avatar
        {...avatarProps}
        url={bigAvatarUrl}
        placeholder={smallAvatarUrl ? {uri: smallAvatarUrl} : undefined}
        size="xxl"
        variant="primary"
        style={styles.pictureContainer}
      />
      <Title title={conversation?.name} center />
      <ChatActionButtons channel={channel} />
      <GroupDescription channel={channel} isAdmin={isUserAdmin} />
      <GroupMembers channel={channel} />
      <Pressable
        onPress={onLeaveGroupPress}
        style={[
          {
            backgroundColor: theme.background.layout.tertiary,
            borderColor: theme.border.neutral.default,
          },
          styles.kickButtonContainer,
        ]}>
        <View style={styles.doorContainer}>
          <Avatar Icon={IconLogout} variant="error" />
          <Typography weight="semiBold" variant="xs" style={styles.doorText}>
            {t('chat.groups.leave_group')}
          </Typography>
        </View>
        <IconChevronRight color={theme.text.neutral.default} />
      </Pressable>
      <DialogLeaveGroup
        channel={channel}
        channelName={conversation?.name || ''}
        isVisible={showLeaveGroupDialog}
        onClose={onCloseLeaveGroupDialog}
      />
    </>
  );
}
