import React, {memo} from 'react';
import {Linking} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Dialog, Typography} from '@components';

interface Props {
  isVisible: boolean;
  onClose: () => void;
}

function DialogMissingPermissionComponent({isVisible, onClose}: Props) {
  const {t} = useTranslation();

  const handleOpenSettings = () => {
    onClose();
    Linking.openSettings().catch(() => {});
  };

  return (
    <Dialog
      isVisible={isVisible}
      onClose={onClose}
      title={t('chat.files.missing_permissions.title')}
      footer={{
        primaryButton: {
          text: t('chat.files.missing_permissions.button'),
          onPress: handleOpenSettings,
        },
        secondaryButton: {
          text: t('general.cancel'),
          onPress: onClose,
        },
      }}>
      <Typography>{t('chat.files.missing_permissions.description')}</Typography>
    </Dialog>
  );
}

export const DialogMissingPermission = memo(DialogMissingPermissionComponent);