import { StatusBar } from 'expo-status-bar';
import { useState, useRef } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Modal from "react-native-modal";

export default function App() {
  const [modalVisible, setModalVisible] = useState(false);

  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={()=> {
        }} />
        <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',
  },
});