import React, {useCallback} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Typography, Image, Button, CardContainer, ListItem} from '@components';
import {useManageGroupAccess} from '@modules/group/hooks/useManageGroupAccess';
import {Group, GroupRequestStatus} from '@modules/group/interfaces';
import IconPolicy from '@modules/group/components/IconPolicy';
import {useTheme} from '@shared/theme';

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

interface Props {
  group: Group;
  onPressMembers: () => void;
}

function RestrictedLayout({group}: Props) {
  const {t} = useTranslation();
  const {onManageAccess, isLoading} = useManageGroupAccess(group);
  const {theme, iconSizes} = useTheme();
  const hasRequested = !!group.groupRequest;
  const isRejected = group.groupRequest?.status === GroupRequestStatus.Rejected;
  const AvatarIcon = useCallback(
    () => <IconPolicy size={iconSizes.x4} policy={group.privacyPolicy} />,
    [group.privacyPolicy, iconSizes.x4],
  );
  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.tertiary},
      ]}>
      <Image source={{uri: group.bannerUrl}} style={styles.banner} />
      <View
        style={[
          styles.titleContainer,
          {backgroundColor: theme.background.elements.default},
        ]}>
        <GroupTitle group={group} />
        {hasRequested && !isRejected ? (
          <CardContainer
            style={[
              styles.cancelContainer,
              {backgroundColor: theme.background.elements.grey},
            ]}>
            <View>
              <Typography variant="s" weight="semiBold">
                {t('group.pending_request')}
              </Typography>
              <Typography variant="xs" color={theme.text.neutral.lighter}>
                {t('group.pending_request_message')}
              </Typography>
            </View>
            <Button
              isLoading={isLoading}
              onPress={onManageAccess}
              text={t('general.cancel')}
              size="sm"
            />
          </CardContainer>
        ) : (
          <Button
            disabled={isRejected}
            isLoading={isLoading}
            onPress={onManageAccess}
            text={t(`group.${isRejected ? 'rejected_request' : 'join_group'}`)}
            size="sm"
          />
        )}
      </View>
      <View style={styles.closeInfo}>
        <ListItem
          avatar={{
            Icon: AvatarIcon,
          }}
          title={t('group.closed')}
          description={t('group.closed_description')}
        />
      </View>
    </View>
  );
}

export default RestrictedLayout;