import {useCallback} from 'react';
import {Linking} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux';
import {Dialog, Typography} from '@components';
import {
  setLocationError,
  setPermissionErrorKey,
} from '@modules/timeTracking/redux';
import {PermissionKey} from '@modules/timeTracking/interfaces';

const getDescriptionKey = (permissionKey: PermissionKey) =>
  ({
    cameraBlocker: 'camera_permission',
    locationBlocker: 'missing_location_permission',
    locationPreciseBlocker: 'no_precise_location_error',
    locationServiceBlocker: 'service_disabled_blocker',
  }[permissionKey]);

export interface Props {
  permissionKey: Nullable<PermissionKey>;
}

function PermissionsDialog({permissionKey}: Props) {
  const dispatch = useDispatch();
  const {t} = useTranslation();
  const isLocationServiceBlocker = permissionKey === 'locationServiceBlocker';

  const onClose = useCallback(() => {
    dispatch(setPermissionErrorKey(null));
    isLocationServiceBlocker && dispatch(setLocationError(null));
  }, [dispatch, isLocationServiceBlocker]);

  const onOpenSettings = useCallback(async () => {
    await Linking.openSettings();
    dispatch(setPermissionErrorKey(null));
    dispatch(setLocationError(null));
  }, [dispatch]);

  return (
    <Dialog
      footer={{
        primaryButton: {
          text: t('general.permissions.go_to_settings'),
          onPress: onOpenSettings,
        },
      }}
      isVisible={!!permissionKey}
      onClose={onClose}
      title={t('general.missing_permissions_title')}>
      {!!permissionKey && (
        <Typography>
          {t(`time_tracker.${getDescriptionKey(permissionKey)}`)}
        </Typography>
      )}
    </Dialog>
  );
}

export default PermissionsDialog;