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

const Home = ({onPressIcon, lang}) => {
  const dispatch = useDispatch();
  const settingsData = useSelector((state) => state.resourcesReducer.settingsData); 
  useEffect(() => {
    dispatch(setLanguage(lang));
  }, [lang]);

  return (
    <View style={[styles.Container,{
        display:!settingsData?.plugin_enabled ? 'none' : 'flex'
    }]}>
      <TouchableOpacity style={styles.ImgCont} onPress={() => onPressIcon()}>
        <Image
          source={lang != 1 ? images.smileyReverse : images.smileyMain}
          resizeMode="contain"
          style={{
            height: 161,
            width: 70,
            right: -2,
          }}
        />
      </TouchableOpacity>
{/* 
      <TouchableOpacity style={styles.ImgCont} onPress={() => onPressIcon()}>
        <ImageBackground
          source={lang != 1 ? images.smileyReverse : images.smileyMain}
          resizeMode="contain"
          style={{
            height: 161,
            width: 70,
            right: -2,
          }}
          imageStyle={{tintColor: settingsData?.color}}
        />
        <View style={{ alignItems:'center', justifyContent:'center',  right: -5,bottom:100,}}>
        <Icon
      name={'smiley'}
      size={35}
      color={COLORS.WHITE}
    />
        </View>
      </TouchableOpacity> */}
    </View>
  );
};

export default Home;
