import React, {useCallback, useEffect, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {IconCalendarPlus, IconDotsVertical} from '@tabler/icons-react-native';
import {Dialog, IconButton, ListItem} from '@components';
import {useAddToCalendar} from '@hooks/useAddToCalendar';
import {LearningSessionDetail} from '@modules/learning/interfaces';

import {styles} from './styles';

interface Props {
  session: LearningSessionDetail;
}

function OptionsDialog({session}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const [showDialog, setShowDialog] = useState(false);
  const {scheduleEventInCalendarApp} = useAddToCalendar({
    title: session.title,
    startDate: session.startDate,
    endDate: session.endDate,
    location: session?.address ?? '',
    url: session?.meetingLink ?? '',
    successMessage: 'learning.session.options.calendar.success',
    scheduledMessage: 'learning.session.options.calendar.scheduled',
  });

  const onClose = useCallback(() => setShowDialog(false), []);
  const onOpen = useCallback(() => setShowDialog(true), []);

  useEffect(() => {
    const headerRight = () => (
      <IconButton
        Icon={IconDotsVertical}
        onPress={onOpen}
        hitSlop={16}
        variant="tertiary"
      />
    );
    session && navigation.setOptions({headerRight});
  }, [session, navigation, onOpen]);

  const onPressAddToCalendar = () => {
    scheduleEventInCalendarApp(onClose);
  };

  return (
    <Dialog
      isVisible={showDialog}
      onClose={onClose}
      title={t('learning.session.options.title')}
      titleNumberOfLines={2}>
      <ListItem
        avatar={{Icon: IconCalendarPlus}}
        onItemPress={onPressAddToCalendar}
        title={t('general.add_to_calendar')}
        description={t('learning.session.options.calendar.description')}
        style={styles.listItem}
        descriptionNumberOfLines={2}
      />
    </Dialog>
  );
}

export default OptionsDialog;