import React,{ useEffect,useState } from 'react';
import { Image, ImageBackground, TouchableOpacity, View } from 'react-native';
import { useSelector } from 'react-redux';
import images from '../../utils/images';
import styles from './styles';

const Ending = ({ lang, onClose}) => {
  const settingsData = useSelector((state) => state.resourcesReducer.settingsData); 

  const [closeDone, setcloseDone] = useState(true)
  useEffect(() => {
    setTimeout(() => {
      if(closeDone)
      {
        onClose()
      }
    }, 2000);
  }, []);

  return (
    <ImageBackground
      style={[styles.imageBackground]}
      resizeMode={'cover'}
      source={settingsData  ? (lang !== 1 ? images.drawerBgReverse : images.drawerBg ): {uri : lang !== 1 ? settingsData.bgImageReverse : settingsData.bgImage}}
      // source={lang !== 1 ? images.drawerBgReverse : images.drawerBg}
      >
      <TouchableOpacity style={[styles.backButton]} onPress={() => {
        setcloseDone(false),
        onClose()}}>
        <Image
          source={images.cross}
          resizeMode="contain"
          style={styles.image}
        />
      </TouchableOpacity>

      <View style={[styles.feedbackView]}>
        <Image
          source={require('../../assets/images/white_check.gif')}
          resizeMode="contain"
          style={styles.imageGif}
        />
      </View>
    </ImageBackground>
  );
};

export default Ending;
