import React, { useEffect } from 'react';
import {
  Alert,
  DeviceEventEmitter,
  NativeEventEmitter,
  PermissionsAndroid,
  Platform,
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';

import Kontakt, { KontaktModule } from 'react-native-kontaktio';
const {
  connect,
  init,
  startDiscovery,
  startRangingBeaconsInRegion,
  startScanning,
} = Kontakt;

const kontaktEmitter = new NativeEventEmitter(KontaktModule);

const isAndroid = Platform.OS === 'android';

/**
 * Android Marshmallow (6.0) and above need to ask the user to grant certain permissions.
 * This function does just that.
 */
const requestLocationPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: 'Location Permission',
        message:
          'This example app needs to access your location in order to use bluetooth beacons.',
        buttonNeutral: 'Ask Me Later',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      return true;
    } else {
      // permission denied
      return false;
    }
  } catch (err) {
    console.warn(err);
    return false;
  }
};

const beaconSetup = async () => {
  if (isAndroid) {
    // Android
    const granted = await requestLocationPermission();
    if (granted) {
      await connect();
      await startScanning();
    } else {
      Alert.alert(
        'Permission error',
        'Location permission not granted. Cannot scan for beacons',
        [{ text: 'OK', onPress: () => console.log('OK Pressed') }],
        { cancelable: false }
      );
    }
  } else {
    // iOS
    await init();

    /**
     * Will discover Kontakt.io beacons only
     */
    await startDiscovery();

    /**
     * Works with any beacon(also virtual beacon, e.g. https://github.com/timd/MactsAsBeacon)
     * Requires user to allow GPS Location (at least while in use)
     *
     * change to match your beacon values
     */
    await startRangingBeaconsInRegion({
      identifier: '',
      uuid: 'A4826DE4-1EA9-4E47-8321-CB7A61E4667E',
      major: 1,
      minor: 34,
    });
  }

  // Add beacon listener
  if (isAndroid) {
    /* works with any beacon */
    DeviceEventEmitter.addListener(
      'beaconsDidUpdate',
      ({ beacons, region }) => {
        console.log('beaconsDidUpdate', { beacons, region });
      },
    );
  } else {
    /* works with Kontakt.io beacons only */
    kontaktEmitter.addListener('didDiscoverDevices', ({ beacons }) => {
      console.log('didDiscoverDevices', { beacons });
    });

    /* works with any beacon */
    kontaktEmitter.addListener('didRangeBeacons', ({ beacons, region }) => {
      console.log('didRangeBeacons', { beacons, region });
    });
  }
};

const App: React.FC = () => {
  useEffect(() => {
    Promise.resolve().then(beaconSetup);

    return () => {
      // remove event listeners
      if (isAndroid) {
        kontaktEmitter.removeAllListeners('beaconsDidUpdate');
      } else {
        kontaktEmitter.removeAllListeners('didDiscoverDevices');
        kontaktEmitter.removeAllListeners('didRangeBeacons');
      }
    };
  }, []);

  return (
    <SafeAreaView>
      <StatusBar barStyle="dark-content" />
      <View style={styles.wrapper}>
        <Text style={styles.title}>react-native-kontaktio Example</Text>
        <Text>Check console.log statements</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    paddingVertical: 10,
    fontSize: 30,
  },
});

export default App;