import React, {useCallback} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Button, Title, Typography} from '@components';
import InvitationResponseButton from '@modules/events/components/InvitationResponseButton';
import {
  EventInvitationStatus,
  EventsAmplitudeSource,
  WorkEvent,
} from '@modules/events/interfaces';
import {useTheme} from '@shared/theme';
import {getFullDateTime, openUrlFromApp} from '@shared/utils';

import {styles} from './styles';

interface Props {
  event: WorkEvent;
  isPastEvent: boolean;
}

function HeaderSection({event, isPastEvent}: Props) {
  const {invitationStatus, location, name, startDateTime, videoCallUrl} = event;
  const {t} = useTranslation();
  const {theme} = useTheme();

  const eventType =
    location && videoCallUrl
      ? t('events.in_person_and_online')
      : location
      ? t('events.in_person_event')
      : videoCallUrl
      ? t('events.online_event')
      : undefined;

  const renderDescription = useCallback(
    () => (
      <Typography
        variant="xs"
        color={theme.text.neutral.brand}
        numberOfLines={1}>
        {getFullDateTime(startDateTime)}
      </Typography>
    ),
    [startDateTime, theme.text.neutral.brand],
  );

  const onJoinEvent = () => {
    openUrlFromApp(videoCallUrl!);
  };

  return (
    <>
      <Title
        title={name}
        renderDescription={renderDescription}
        topText={eventType}
        size="l"
      />
      {!isPastEvent && (
        <View style={styles.buttonsContainer}>
          {!!videoCallUrl && (
            <View style={styles.button}>
              <Button
                text={t('events.join_the_event')}
                onPress={onJoinEvent}
                variant={
                  invitationStatus === EventInvitationStatus.Pending
                    ? 'secondary'
                    : 'primary'
                }
              />
            </View>
          )}
          <InvitationResponseButton
            event={event}
            source={EventsAmplitudeSource.EVENT_DETAIL}
          />
        </View>
      )}
    </>
  );
}

export default HeaderSection;