import React, {useEffect, useState} from 'react';
import {View, StyleSheet, Button} from 'react-native';
import notifee from '@notifee/react-native';

const NOTIFICATION = {ID: 'id', NAME: 'My Notifications'};

let interval = false;
let timer = 0;

const registerService = () => {
  notifee.createChannel({id: NOTIFICATION.ID, name: NOTIFICATION.NAME});
  notifee.registerForegroundService(notification => {
    return new Promise(() => {
      interval = setInterval(() => {
        timer = timer + 1;
        notifee.displayNotification({
          id: notification.id,
          body: `${timer.toString()}`,
          android: {
            ...notification.android,
          },
        });
      }, 1000);
    });
  });
};

const App = () => {
  const [isRunning, setRunning] = useState(false);

  useEffect(() => {
    registerService();
  }, []);

  const startPress = () => {
    setRunning(bool => !bool);
    notifee.displayNotification({
      title: 'Foreground service',
      body: 'This notification will exist for the lifetime of the service runner',
      android: {
        channelId: NOTIFICATION.ID,
        asForegroundService: true,
      },
    });
  };

  const onCancelPress = async () => {
    setRunning(bool => !bool);
    await notifee.stopForegroundService();
    clearInterval(interval);
  };

  return (
    <View style={styles.screen}>
      <Button
        title={isRunning ? 'Close Notification' : 'Show Notification'}
        onPress={isRunning ? onCancelPress : startPress}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {flex: 1, justifyContent: 'center', alignItems: 'center'},
});

export default App;