import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";

//importacion del modal para mostar los pdfs en fila
import ModalProtocolos from "../Componentes/ModalProtocolos";

// Importación de Youtube
import Youtube from 'react-native-youtube-iframe';

const ProtocolosEscolares = () => {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <SafeAreaView style={styles.Contenedor}>
      <StatusBar />
      <Image
        style={styles.ImgTil}
        source={require("../assets/FigTitulos/PE.png")}
      />
      <View style={styles.ContenedorDos}>
        <Text style={styles.TextUno}>
          Te informamos que el pasado 14 de diciembre en el Diario Oficial de
          la Federación se publicaron nuevos Lineamientos para los Protocolos y
          en este momento en la Secretaría de Educación de Zacatecas se está
          trabajando en la armonización, mientras tanto los protocolos que a
          continuación están puedes descargarlos y siguen vigentes.
        </Text>

        <TouchableOpacity style = {styles.btn} onPress={() => setModalVisible(true)}>
          <Text style = {styles.textPE}>Protocolos escolares</Text>
        </TouchableOpacity>
        <ModalProtocolos visible={modalVisible} onClose={() => setModalVisible(false)} />

        

        <View style={styles.Vid}>
          <Youtube
            videoId='OCAOAPUFJ0c'
            height={300}
            width={350}
          />
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  Contenedor: {
    backgroundColor: "#519ab4",
    flex: 1,
    justifyContent: "flex-start",
    paddingHorizontal: 20,
    position: "relative",
  },
  Vid: {              //video de youtube
    top: 80,
    alignItems: "center",
  },
  ContenedorDos: {    //contenedor superficial
    margin: 5,
    backgroundColor: "#1c6f88",
    borderRadius: 38,
    alignItems: "center",
    top: 250,
    height: 550,
    width: 360,
  },
  TextUno: {          //texto de "te informamos..."
    color: "#D9D9D9",
    fontSize: 13,
    fontWeight: "bold",
    top: 25,
    textAlign: "justify",
    width: 310,
  },
  ImgTil: {           //figura titulo
    resizeMode: "center",
    position: "absolute",
    left: -185,
    height: 115,
    top: 50,
  },
  btn: {              //boton de lo protocolos escolares
    backgroundColor: "#62acac",
    margin: 30,
    borderRadius: 10,
    alignItems: "center",
    width: 250,
    height: 50,
    left: 0,
    top: 30,
  },
  textPE: {         //texto en el boton
    color: "#D9D9D9",
    fontSize: 13,
    fontWeight: "bold",
    top: 15
  },
});

export default ProtocolosEscolares;