import React from 'react';
import {Pressable, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconCalendarEvent} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {CardContainer, Divider, Image, Title} from '@components';
import {EventsAmplitudeSource, WorkEvent} from '@modules/events/interfaces';
import {
  getNormalDate,
  getTimeByLanguage,
  isToday,
  isTomorrow,
  getShortDate,
} from '@shared/utils';
import {useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';

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

interface Props {
  event: WorkEvent;
  showDateTitle?: boolean;
  showInvitation?: boolean;
  showShortDate?: boolean;
  source: string;
}

function EventItem({
  event,
  showDateTitle,
  showInvitation,
  showShortDate,
  source,
}: Props) {
  const {
    id,
    name,
    startDateTime,
    endDateTime,
    coverPictureUrl,
    location,
    videoCallUrl,
  } = event;
  const {t} = useTranslation();
  const {iconSizes, theme} = useTheme();
  const navigation = useNavigation();

  const eventDate = `${
    showShortDate ? `${getShortDate(startDateTime)} - ` : ''
  }${getTimeByLanguage(startDateTime)}${
    endDateTime ? ` ${t('general.to')} ${getTimeByLanguage(endDateTime)}` : ''
  }`;
  const eventType =
    location && videoCallUrl
      ? t('events.in_person_and_online')
      : location
      ? t('events.in_person_event')
      : videoCallUrl
      ? t('events.online_event')
      : '';
  const dateTitle = isToday(startDateTime)
    ? t('general.today')
    : isTomorrow(startDateTime)
    ? t('general.tomorrow')
    : getNormalDate(startDateTime);

  const onPressEvent = () => {
    navigation.navigate(Screens.EVENT_DETAIL, {
      eventId: id,
      source: `${source}_TAB`,
    });
  };

  return (
    <Pressable onPress={onPressEvent} style={styles.gap}>
      {showDateTitle && <Title title={dateTitle} style={styles.dateTitle} />}
      <CardContainer style={styles.cardContainer}>
        <View style={styles.infoContainer}>
          {coverPictureUrl ? (
            <Image source={{uri: coverPictureUrl}} style={styles.image} />
          ) : (
            <CardContainer
              elevation
              style={[
                styles.image,
                styles.defaultCoverPicture,
                {backgroundColor: theme.background.layout.brand},
              ]}>
              <IconCalendarEvent
                size={iconSizes.x10}
                color={theme.text.neutral.brand}
              />
            </CardContainer>
          )}
          <Title
            topText={eventDate}
            title={name}
            titleNumberOfLines={2}
            description={eventType}
            variant="primaryTop"
            style={styles.title}
          />
        </View>
        {showInvitation && (
          <>
            <Divider />
            <InvitationResponseButton
              event={event}
              source={EventsAmplitudeSource.INVITATIONS_TAB}
            />
          </>
        )}
      </CardContainer>
    </Pressable>
  );
}

export default EventItem;