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

//importamos los componente para ver los pdf
import ProtocolosZacPDF from './DocumentosPDF/ProtocolosZacPDF';
import ProtocolosZacPDFDos from './DocumentosPDF/ProtocolosZacPDFDos';




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

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

  const controlMuestraPDF = () => {
    setMuestraPDF(true);
    setMuestraPDFDos(false);
  };
  const controlMuestraPDFDos = () => {
    setMuestraPDFDos(true);
    setMuestraPDF(false);
  };
  const controlCierraPDF = () => {
    setMuestraPDF(false);
    setMuestraPDFDos(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 style = {styles.BtnDos} onPress={controlMuestraPDFDos}>
          <Text style = {styles.TextPDEZ}>Protocolos del estado de Zacatecas</Text>
        </TouchableOpacity>
          {muestraPDFDos && <ProtocolosZacPDFDos 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:250,
    borderRadius: 15,
    height: 400,
    width:300,
    right: -50,
  },
  btnCerrar: {
    marginTop: 10,
    backgroundColor: "#62acac",
    padding: 10,
    borderRadius: 5,
    top: 150
  },
  TextPNCE: {
    fontSize: 13,
    fontWeight: "bold",
    top:-130
  },
  TextPDEZ: {
    fontSize: 13,
    fontWeight: "bold",
    top: -90
  },
  TextCerrar: {
    color: "white",
    fontSize: 13,
    fontWeight: "bold",
  },
});

export default ModalProtocolos;