import { StatusBar } from 'expo-status-bar';
import { useState, useRef, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import Modal from "react-native-modal";



export default function App() {
  const [modalVisible, setModalVisible] = useState(false);
  const [expoPushToken, setExpoPushToken] = useState();
  const [notification, setNotification] = useState();
  useEffect(()=>{
    registerForPushNotificationsAsync().catch((error) => {
    console.log('There has been a problem with your fetch operation: ' + error.message);
     // ADD THIS THROW error
      throw error;
    });
    Notifications.setNotificationHandler({
      handleNotification: async () => ({
        shouldShowAlert: true,
        shouldPlaySound: false,
        shouldSetBadge: false,
      }),
    });
    Notifications.addNotificationReceivedListener(() => setNotification(notification));
    Notifications.addNotificationResponseReceivedListener((response) => console.log(response));
  },[]);


  registerForPushNotificationsAsync = async () => {
    if (Device.isDevice) {
      const { status: existingStatus } = await Notifications.getPermissionsAsync();
      let finalStatus = existingStatus;
      if (existingStatus !== 'granted') {
        const { status } = await Notifications.requestPermissionsAsync();
        finalStatus = status;
      }
      if (finalStatus !== 'granted') {
        alert('Failed to get push token for push notification!');
        return;
      } else {
        console.log(finalStatus)
      }
      const token = (await Notifications.getExpoPushTokenAsync()).data;
      console.log(token);
      setExpoPushToken(token);
    } else {
      alert('Must use physical device for Push Notifications');
    }
  
    // if (Platform.OS === 'android') {
    //   Notifications.setNotificationChannelAsync('default', {
    //     name: 'default',
    //     importance: Notifications.AndroidImportance.MAX,
    //     vibrationPattern: [0, 250, 250, 250],
    //     lightColor: '#FF231F7C',
    //   });}
  };
  return (
    <>
    {/* SWIPEABLE MODAL START */}
      {modalVisible &&
        <Modal
          testID={"modal"}
          isVisible={true}
          onSwipeComplete={() => setModalVisible(false)}
          swipeDirection={["down"]}
          scrollOffsetMax={1500 - 600} // content height - ScrollView height
          propagateSwipe={true}
          style={{ ...styles2.modal, position: "relative" }}
        >
          <View style={styles2.scrollableModal}>
            <View style={styles2.scrollableModalContent}>
              <View style={{ flex: 1, flexDirection: "column", alignItems: "center", }}>
                <View>
                  <Text>ABCDEFGH</Text>
                  <Button title='CLOSE' onPress={() => setModalVisible(false)} />
                </View>
              </View>
            </View>
          </View>
        </Modal>
      }
      {/* SWIPEABLE MODAL END */}
      <View style={styles.container}>



        <Button title='ABCD' onPress={() => setModalVisible(true)} />
        <Button title='D' onPress={()=> {
          console.log('D was clicked')
        }} />
        <Text>Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    </>
  );
}

const styles2 = StyleSheet.create({
  modal: {
    justifyContent: "flex-end",
    margin: 0,
  },
  scrollableModal: {
    height: "50%",
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    overflow: "hidden",
    position: "relative",
  },
  scrollableModalContent: {
    paddingTop: 30,
    paddingBottom: 200,
    paddingHorizontal: 10,
    minHeight: 800,
    height: "auto",
    backgroundColor: "pink",
  },
  header: {
    fontFamily: "Ubuntu_500Medium",
    fontSize: 25,
    marginBottom: 20,
    textAlign: "center",
  },
  info: {
    textAlign: "center",
    fontSize: 18,
    color: "gray"
  }
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lightblue',
    alignItems: 'center',
    justifyContent: 'center',
  },
});