import * as React from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  StatusBar,
} from 'react-native';
import {BACKGROUND_GRADIENT_MAP} from '../../constants';
import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {BackgroundGradientType} from '../../types';
import {useNavigation} from '@react-navigation/native';
import {SafeAreaView} from 'react-native-safe-area-context';
import Animated from 'react-native-reanimated';
import LinearGradient from 'react-native-linear-gradient';
import {checkPermission, requestPermission} from 'react-native-contacts';
import AsyncStorage from '@react-native-community/async-storage';

const RequestContactsAccess: React.FC = () => {
  const navigation = useNavigation();

  const handleAllowAccess = async () => {
    try {
      checkPermission().then((permission) => {
        if (permission === 'undefined') {
          requestPermission().then((response) => {
            if (response === 'authorized' || response === 'denied') {
              AsyncStorage.setItem(
                'respondedToAccessContacts',
                'true',
              ).then(() => navigation.navigate('Search'));
            }
          });
        } else {
          AsyncStorage.setItem('respondedToAccessContacts', 'true').then(() =>
            navigation.navigate('Search'),
          );
        }
      });
    } catch (err) {
      console.log(
        'Unable to check and request permission to get access to user contacts',
      );
    }
  };

  const handleDontAllowAccess = async () => {
    try {
      await AsyncStorage.setItem('respondedToAccessContacts', 'true');
      navigation.navigate('Search');
    } catch (err) {
      console.log(
        'Unable to check and request permission to get access to user contacts',
      );
    }
  };

  return (
    <LinearGradient
      colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Light]}
      useAngle={true}
      angle={154.72}
      angleCenter={{x: 0.5, y: 0.5}}
      style={{flex: 1}}>
      <SafeAreaView>
        <View style={{height: SCREEN_HEIGHT}}>
          <Animated.ScrollView
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            scrollEnabled={isIPhoneX() ? false : true}>
            <StatusBar barStyle="light-content" translucent={false} />
            <View style={styles.mainContainer}>
              <Image
                source={require('../../assets/icons/findFriends/find-friend-icon.png')}
                style={styles.image}
              />
              <Text style={styles.title}>FIND FRIENDS!</Text>
              <Text style={styles.subtext}>
                This is so you can find your friends already on here! Isn’t a
                party better when your favorite people are there?
              </Text>
              <View style={styles.bulletPointView}>
                <Image
                  source={require('../../assets/icons/findFriends/lock-icon.png')}
                  style={styles.icon}
                />
                <Text style={styles.bulletPointText}>Always Stays Private</Text>
              </View>
              <View style={styles.bulletPointView}>
                <Image
                  source={require('../../assets/icons/findFriends/phone-cross-icon.png')}
                  style={styles.icon}
                />
                <Text style={styles.bulletPointText}>
                  We wouldn’t dare send any messages
                </Text>
              </View>
              <TouchableOpacity
                onPress={handleAllowAccess}
                style={styles.allowButton}>
                <Text style={styles.allowButtonLabel}>Allow Contacts</Text>
              </TouchableOpacity>
              <TouchableOpacity
                accessibilityLabel="Don't allow button"
                style={styles.dontAllowButton}
                onPress={handleDontAllowAccess}>
                <Text style={styles.dontAllowButtonText}>Don’t Allow</Text>
              </TouchableOpacity>
            </View>
          </Animated.ScrollView>
        </View>
      </SafeAreaView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    flexDirection: 'column',
    alignContent: 'center',
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    marginBottom: '15%',
  },
  image: {
    marginBottom: '2%',
    width: SCREEN_WIDTH,
    height: SCREEN_WIDTH * 0.49,
  },
  title: {
    color: '#fff',
    alignSelf: 'center',
    fontSize: normalize(28),
    lineHeight: normalize(35),
    fontWeight: '600',
    textAlign: 'center',
    marginBottom: '2%',
  },
  subtext: {
    color: '#fff',
    alignSelf: 'center',
    fontSize: normalize(16),
    lineHeight: normalize(25),
    fontWeight: '600',
    textAlign: 'center',
    width: '83%',
    height: '15%',
  },
  bulletPointView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignSelf: 'center',
    width: SCREEN_WIDTH * 0.55,
    marginBottom: '7%',
  },
  icon: {
    margin: '1%',
    width: normalize(38),
    height: normalize(38),
    alignSelf: 'flex-start',
  },
  bulletPointText: {
    color: '#fff',
    fontSize: normalize(15),
    fontWeight: '500',
    lineHeight: normalize(20),
    alignSelf: 'center',
    width: '75%',
    textAlign: 'center',
  },
  allowButton: {
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    width: '41.5%',
    height: '6%',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#fff',
    marginTop: '8%',
    marginBottom: '3%',
  },
  allowButtonLabel: {
    fontSize: normalize(17),
    fontWeight: '600',
    lineHeight: normalize(20.29),
    color: '#3C4461',
  },
  dontAllowButton: {
    alignSelf: 'center',
    borderBottomWidth: 1,
    borderBottomColor: 'white',
  },
  dontAllowButtonText: {
    fontSize: normalize(15),
    fontWeight: '500',
    lineHeight: normalize(20),
    color: '#fff',
  },
});
export default RequestContactsAccess;
