import React, { useState } from 'react';
import {
  Modal,
  View,
  Text,
  Pressable,
  StyleSheet,
  TouchableWithoutFeedback
} from 'react-native';

const BootstrapModal = ({ visible, setVisible }) => {

  return (
    <Modal
      transparent
      animationType="fade"
      visible={visible}
      onRequestClose={() => setVisible(false)}
    >
      <TouchableWithoutFeedback onPress={() => setVisible(false)}>
        <View style={styles.backdrop} />
      </TouchableWithoutFeedback>

      <View style={styles.centeredView}>
        <View style={styles.modalView}>
          <Text style={styles.modalText}>Save as Preset Text?</Text>
          <View style={styles.titleInputContainer}>
            <Text style={styles.modalSubText}>Set Title</Text>

          </View>
          <Pressable
            style={[styles.button, styles.buttonClose]}
            onPress={() => setVisible(false)}
          >
            <Text style={styles.textStyle}>Save</Text>
          </Pressable>
        </View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10,
  },
  backdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  modalView: {
    width: '80%',
    backgroundColor: 'white',
    borderRadius: 12,
    padding: 20,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 5,
  },
  titleInputContainer: {
    alignItems:"flex-start"
  },
  openButton: {
    backgroundColor: '#007bff',
    borderRadius: 6,
    padding: 10,
    elevation: 2,
  },
  button: {
    marginTop: 15,
    padding: 10,
    borderRadius: 6,
  },
  buttonClose: {
    backgroundColor: '#DD9C49',
    borderRadius: 30,
    paddingVertical: 10,
    paddingHorizontal: 35
  },
  textStyle: {
    color: 'white',
    fontWeight: '600',
    textAlign: 'center',

  },
  modalText: {
    fontSize: 18,
    color: '#396868',
    fontWeight: 'bolder'
  },
  modalSubText: {
    fontSize: 12,
    color: '#396868',
    alignSelf:"flex-start",
    fontWeight: 'bolder'
  },
  textArea: {
    height: 220,
    borderColor: "#ccc",
    borderWidth: 1,
    padding: 10,
    borderRadius: 8,
    textAlignVertical: "top", // Makes text start from the top-left
    backgroundColor: "#fff",
    marginBottom: 20
  }
});

export default BootstrapModal;