import React, {useCallback, useEffect, useState} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {IconDotsVertical, IconPdf} from '@tabler/icons-react-native';
import {Dialog, IconButton, ListItem, Spinner} from '@components';
import {ServiceManagementTask} from '@modules/serviceManagement/interfaces';
import {useDownloadTaskCertificate} from '@modules/serviceManagement/hooks/useDownloadTaskCertificate';

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

interface Props {
  task: ServiceManagementTask;
  isAgent?: boolean;
}

export function ServiceManagementTaskOptionsDialog({
  task,
  isAgent = false,
}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const [isVisible, setIsVisible] = useState(false);
  const onOpen = useCallback(() => setIsVisible(true), []);
  const onClose = useCallback(() => setIsVisible(false), []);

  const {onDownloadCertificate, isDownloading} = useDownloadTaskCertificate(
    task,
    onClose,
    isAgent,
  );

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

  const onPressDownloadCertificate = useCallback(() => {
    onDownloadCertificate();
  }, [onDownloadCertificate]);

  return (
    <>
      <DownloadCertificateNewFeatureModal />
      <Dialog
        isVisible={isVisible}
        onClose={onClose}
        title={t('general.more_options')}>
        {isDownloading ? (
          <View style={styles.spinnerContainer}>
            <Spinner />
          </View>
        ) : (
          <ListItem
            avatar={{Icon: IconPdf}}
            onItemPress={onPressDownloadCertificate}
            title={t('service_management.download_certificate.download')}
            style={styles.listItem}
          />
        )}
      </Dialog>
    </>
  );
}