import React, { FunctionComponent, useEffect } from 'react';
import { View, StyleSheet, BackHandler } from 'react-native';
import { useDispatch } from 'react-redux';
import AsyncStorage from '@react-native-community/async-storage';
import { StackNavigationProp } from '@react-navigation/stack';
import { HeaderButton } from '../../common';
import { PADDING_TOP, IS_SMALL_SCREEN, PADDING_BOTTOM, USER_AGREED_TO_BATTERY } from '../../../constants/Constants';
import { USER_DISABLED_BATTERY } from '../../../constants/ActionTypes';
import BatteryPermission from '../../common/BatteryPermission';

interface Props {
  navigation: StackNavigationProp<any, 'BatteryModal'>
}

const BatteryModal: FunctionComponent<Props> = ({ navigation }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handleExit);

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handleExit);
    };
  });

  const handleExit = async () => {
    dispatch({ type: USER_DISABLED_BATTERY, payload: false });
    await AsyncStorage.setItem(USER_AGREED_TO_BATTERY, 'false');
    navigation.goBack();
    return true;
  };

  return (
    <View style={styles.container}>
      <HeaderButton type="close" onPress={handleExit} />
      <BatteryPermission
        onEnd={() => {
          navigation.goBack();
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: PADDING_TOP(IS_SMALL_SCREEN ? 40 : 92),
    paddingBottom: PADDING_BOTTOM(IS_SMALL_SCREEN ? 10 : 77)
  },
});

export default BatteryModal;