import { NavigationContainer } from '@react-navigation/native';
import React, {useState,useEffect} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity,FlatList} from 'react-native';
import { useDispatch } from 'react-redux'; 
import * as memoryActions from '../../../store/actions/memory'
import { SCREEN2 } from '../../../memory/data/elementry-level';

let gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);

const GameScreenTwoAll = ({navigation}) => {

    const shuffle = () => {
        gameData = SCREEN2.sort((item)=>Math.random(item.id)-0.5);
    };

    if(gameData.length == 0){
        shuffle();
    }

    const dispatch = useDispatch();

    const [time, setTime] = useState(0);
    const [timerOn, setTimeOn] = useState(true);

    useEffect(()=>{
        let interval = null;
    
        if(timerOn){
          interval = setInterval(()=>{
            setTime(prevTime=> prevTime + 20)
          },10)
        }else{
          clearInterval(interval);
        }
    
        return () => clearInterval(interval);
    
      },[timerOn]);

      const renderImageItem = (itemData) => {
        return(
            <TouchableOpacity activeOpacity={0.7} style={styles.imageItem} onPress={()=>{dispatch(memoryActions.setAnswers({question: itemData.item.question, answer: itemData.item.answer})); setTimeOn(false); dispatch(memoryActions.setTime({question: itemData.item.question, time: time})); gameData = []; navigation.navigate('GameScreenThree')}}>
                <Image style={styles.image}  source={itemData.item.source}/>
            </TouchableOpacity>
        )
      }

    return(
        <View style={styles.screen}>
            <FlatList
                keyExtractor={(item, data)=>item.id}
                data={gameData}
                renderItem={renderImageItem}
                numColumns={2}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        padding: 10,
        alignItems: 'center',
    },
    imageItem: {
        width: '48%',
        height: 165,
        margin: 5,
        borderWidth: 1,
        borderColor: 'black',
        borderRadius: 10,
        shadowColor: 'black',
        shadowOpacity: 0.26,
        shadowOffset: {width:0, height:2},
        shadowRadius: 10,
        elevation: 8,
        overflow: 'hidden'
    },
    imageContainer: {
        flexDirection: 'row',
        width: '100%'
    },
    image: {
        width: '100%',
        height: '100%'
    }

});

export default GameScreenTwoAll;