import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { Image, SafeAreaView, StyleSheet, Text, TouchableOpacity, Dimensions, View} from 'react-native';
import Youtube from 'react-native-youtube-iframe';

const Bienvenida = ({ navigation }) => {

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

    //conestante para el boton de continuar despues de 10 segundos
  const [showButton, setShowButton] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setShowButton(true);
    }, 1000);
    return () => clearTimeout(timer);
    }, []); 

    
  return (
    <SafeAreaView style = {styles.Contenedor}>
        <StatusBar></StatusBar>

        <View style = {[styles.VidUno, {width: windowWidth * 0.2, height: windowHeight * 0.6}]}>
        <Youtube
            videoId='GrpK--JZHTo'
            height={400}
            width={350}
        />
        </View>
        
        {showButton && (
        <TouchableOpacity style={[styles.btn, {width: windowWidth * 0.6, height: windowHeight * 0.1}]} 
          onPress={() => navigation.replace('Menu de inicio')}>
          <Text style={styles.textUno}>¡Continuemos!</Text>
        </TouchableOpacity>
        )}

        <Image style = {[styles.ImgCinco, {width: windowWidth * 0.2, height: windowHeight * 0.2}]} 
        source = {require("../assets/FigIcon/kidCinco.png")}/>

        <Image style = {[styles.ImgSeis, {width: windowWidth * 0.2, height: windowHeight * 0.2}]}
        source = {require("../assets/FigIcon/KidSiete.png")}/>

    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
    Contenedor: {
        flex: 1,
        backgroundColor: "#519ab4",
        justifyContent: "center",
        paddingHorizontal: 20,
    },
    VidUno: {
      right: "-39%",
      justifyContent: "center",
      alignItems: "center",
      top: "30%"
    },
    btn: {
        backgroundColor: "#62acac",
        margin: 30,
        borderRadius: 10,
        alignItems: "center",
        justifyContent: "center",
        top: "1%",
        right: "-8%"
    },
    textUno: {
        color: "#D9D9D9",
        fontSize: 18,
    },
    ImgCinco: {//niña con pelo rubio
        resizeMode: "center",
        right: "-87%",
        top: "13%",

    },
    ImgSeis: {//niña con pelo rosa
        resizeMode: "center",
        top: "-7%",
        right: "7%"

      },

});

export default Bienvenida;
