import React from "react";
import { StyleSheet, View, Text, Pressable, SafeAreaView, ScrollView, Image } from 'react-native';
import Orientation from 'react-native-orientation-locker';
import ImageButton from "../component/ImageButton";

export default function Home({ navigation }){

    const onPressHandler = () => {
        navigation.navigate('Start');
    }

    React.useEffect(() => {
      const unsubscribe = navigation.addListener("focus", () => {
        Orientation.unlockAllOrientations();
        Orientation.lockToPortrait();
      });
      return unsubscribe;
    }, [navigation]);

    return (
      <SafeAreaView>
        <ScrollView>
          <View style={styles.imageContainer}>
            <View style={styles.imageView}>
              <Image
                style={styles.image}
                source={require('../assets/color/background.png')}
                resizeMode="contain"></Image>
              <ImageButton path="Color" title="Color Activity" />
            </View>
            <View style={styles.imageView}>
              <Image
                style={styles.image}
                source={require('../assets/read/image/background4.jpg')}
                resizeMode="contain"></Image>
              <ImageButton path="Read" title="Read Activity" />
            </View>
          </View>
          <View style={styles.imageContainer}>
            <View style={styles.imageView}>
              <Image
                style={styles.image}
                source={require('../assets/color/background.png')}
                resizeMode="contain"></Image>
              <ImageButton path="GameList" title="Memory Activities" />
            </View>
            <View style={styles.imageView}>
              <Image
                style={styles.image}
                source={require('../assets/color/background.png')}
                resizeMode="contain"></Image>
              <ImageButton path="Progress" title="Progress Check" />
            </View>
            {/* <View style={styles.imageView}>
              <Image
                style={styles.image}
                source={require('../assets/color/background.png')}
                resizeMode="contain"></Image>
              <ImageButton path="Progress" title="Check" />
            </View> */}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
}

const styles = StyleSheet.create({

    imageContainer:{
        flexDirection: "row",
        marginTop: 70,
    },
    imageView: {
        width: 180,
        height: 300,
        // borderWidth:1,
        // borderColor: "#000",
        marginHorizontal: 15,
        borderRadius: 50
    },
    image: {
        width: "100%",
        height: "100%",
        borderRadius: 50
    },
})