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

//importamos el componente para el modaldirectorio





const ModalProtocolos = ({ visible, onClose }) => {

  //constante para abrir y cerrar los pdf, se utiliza en cada touchable
  const [muestraPDF, setMuestraPDF] = useState(false);
  

  const controlMuestraPDF = () => {
    setMuestraPDF(true);
  };
 
  const controlCierraPDF = () => {
    setMuestraPDF(false);
  };

  return (
    <Modal transparent={true} animationType="fade" visible={visible} onRequestClose={onClose}>
      <View style={styles.modalContenedor}>

        <TouchableOpacity onPress={controlMuestraPDF}>
          <Text style = {styles.TextPNCE}>Programa Nacional de convivencia escolar</Text>
        </TouchableOpacity>
          {muestraPDF && <ProtocolosZacPDF onClose={controlCierraPDF} />}

        



        <TouchableOpacity onPress={onClose} style={styles.btnCerrar}>
          <Text style={styles.TextCerrar}>Cerrar</Text>
        </TouchableOpacity>
        
      </View>
    </Modal>
  );
};
const styles = StyleSheet.create({
  modalContenedor: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: "white",
    top:200,
    borderRadius: 15,
    height: 500,
    width:300,
    right: -50,
  },
  btnCerrar: {
    marginTop: 10,
    backgroundColor: "#62acac",
    padding: 10,
    borderRadius: 5,
    top: 200
  },
  TextPNCE: {
    fontSize: 13,
    fontWeight: "bold",
    top:-150
  },
  TextPDEZ: {
    fontSize: 13,
    fontWeight: "bold",
    top: -100
  },
  TextCerrar: {
    color: "white",
    fontSize: 13,
    fontWeight: "bold",
  },
});

export default ModalDirectorio;