import React, { useState } from "react";
import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, Dimensions } from "react-native";

//Importacion del componente pdf para directorio de instituciones
import DirectorioPDF from "../Componentes/DocumentosPDF/DirectorioPDF";

//importacion del modal para talleres
import ModalTalleres from "../Componentes/ModalTalleres";

const Directorio = () => {

    const windowWidth = Dimensions.get('window').width;
    const windowHeight = Dimensions.get('window').height;

    //constante para abrir pdf
    const [MuestraPDF, setMuestraPDF] = useState(false);
    const ControlMuestraPDF = () => {
        setMuestraPDF(true);
    };
    const ControlCierraPDF = () => {
        setMuestraPDF(false);
    };

    //constantes para abrir y cerrar constantes de talleres 
    const [modalVisible, setModalVisible] = useState(false);


    return(
        <SafeAreaView style = {styles.Contenedor}>
           
            <Image style = {[styles.ImgeTil, {width: windowWidth * 0.7, height: windowHeight * 0.25}]}
            source={require("../assets/FigTitulos/DO.png")}
            />
            <TouchableOpacity style = {[styles.BtnUno, {width: windowWidth * 0.40, height: windowHeight * 0.35}]} 
                onPress={() => setModalVisible(true)}>
                <Text style = {styles.TextUno}>Conferencias,{"\n"}Capacitaciones{"\n"}y talleres</Text>
                <ModalTalleres visible={modalVisible} onClose={() => setModalVisible(false)}/>
                <Image style = {[styles.ImgeUno, {width: windowWidth * 0.2, height: windowHeight * 0.06}]}
                source={require("../assets/FigIcon/ceLogo.png")}
                />
            </TouchableOpacity>

            <TouchableOpacity style = {[styles.BtnDos, {width: windowWidth * 0.40, height: windowHeight * 0.35}]}
                onPress={ControlMuestraPDF}>
                <Text style = {styles.TextDos}>Directorio de Insituciónes</Text>
                <Image style = {[styles.ImgeDos, {width: windowWidth * 0.2, height: windowHeight * 0.06}]}
                source={require("../assets/FigIcon/ddiLogo.png")}
                />
            </TouchableOpacity>
            {MuestraPDF && <DirectorioPDF onClose={ControlCierraPDF}/>}
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    Contenedor: {
        backgroundColor: "#519ab4",
        flex: 1,
    },
    ImgeTil: {
        resizeMode: "center",
        alignSelf: "center",
    },
    BtnUno: {               //conferencias y capacitaciones
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
        marginHorizontal: "5%"
    },
    TextUno: { 
        color: "#D9D9D9", 
        fontWeight: "800",
        alignSelf: "center",
    },
    ImgeUno: {
        resizeMode: "center",
        alignSelf: "center",
        top: "25%",

    },

    BtnDos: {               //Directorio de instituciones
        padding:20,
        margin: 10,
        borderRadius: 15,
        backgroundColor: "#327f98",
        alignSelf: "flex-end",
        top: "-36%",
        marginHorizontal: "5%"

    },
    TextDos: { 
        color: "#D9D9D9", 
        fontWeight: "800",
        textAlign: "center",
},
    ImgeDos: {
        resizeMode: "center",
        alignSelf: "center",
        top: "32%"
    },
})

export default Directorio;