import React from 'react';
import {Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconUserPlus} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {Button, CardContainer, Divider, Title} from '@components';
import {EventAudienceStats, WorkEvent} from '@modules/events/interfaces';
import {Screens} from '@shared/constants';

import {styles} from './styles';

interface Props {
  canInvite: boolean;
  eventAudience?: EventAudienceStats;
  event: WorkEvent;
  onPressInvitations: () => void;
}

function AudienceSection({
  canInvite,
  eventAudience,
  event,
  onPressInvitations,
}: Props) {
  const navigation = useNavigation();
  const {t} = useTranslation();

  const onPressInvite = () => {
    navigation.navigate(Screens.EVENT_INVITE_USERS, {event});
  };

  return eventAudience || canInvite ? (
    <CardContainer style={styles.container}>
      <Title title={t('events.event_audience')} size="s" />
      {eventAudience && (
        <Pressable onPress={onPressInvitations} style={styles.contentContainer}>
          <Title
            description={t('events.invitation_status.they_will_attend')}
            title={eventAudience.accepted.toString()}
            style={styles.title}
          />
          <Divider direction="vertical" />
          <Title
            description={t('events.invitation_status.they_may_attend')}
            title={eventAudience.mayAssist.toString()}
            style={styles.title}
          />
          <Divider direction="vertical" />
          <Title
            description={t('events.invitation_status.invited')}
            title={eventAudience.pending.toString()}
            style={styles.title}
          />
        </Pressable>
      )}
      {canInvite && (
        <>
          <Divider />
          <Button
            IconLeft={IconUserPlus}
            onPress={onPressInvite}
            text={t('events.invite')}
            variant="secondary"
          />
        </>
      )}
    </CardContainer>
  ) : null;
}

export default AudienceSection;