import React, { useState } from 'react';
import {
  Dimensions,
  FlatList,
  Image,
  ImageBackground, Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { setFeedbackLanguage } from '../../store/actions';
import { COLORS } from '../../utils/colors';
import images from '../../utils/images';
import styles from './styles';
const {height,width} = Dimensions.get('window')
const SelectLanguage = ({ onClose, onLanguageSelect, lang }) => {
  const [selectedId, setSelectedId] = useState();
  const dispatch = useDispatch();
  const languageResource = useSelector((state) => state.resourcesReducer.resource);
  const settingsData = useSelector((state) => state.resourcesReducer.settingsData); 
  const languages = [
    {
      id: 1,
      language: languageResource.English,
    },
    {
      id: 2,
      language: languageResource.Arabic,
    },
    {
      id: 3,
      language: languageResource.Urdu,
    },
  ];

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

      <View style={[styles.feedbackView]}>
      <Text allowFontScaling={false} style={styles.feedbackTextBot}>
          {languageResource.Hello_I_am_Ajbot}
        </Text>
        <Image
          source={images.bot_img}
          resizeMode="contain"
          style={styles.imageGif}
        />
        <Text allowFontScaling={false} style={styles.feedbackTextNormal}>
          {' '}
          {languageResource.Hello_I_am_Ajbot2}
        </Text>
        <Text allowFontScaling={false} style={styles.feedbackTextNormal}>
          {'\n '}
          {languageResource.Hello_I_am_Ajbot3}
        </Text>
      </View>
      <View style={{paddingVertical: height * 0.04 }}/>
      <View style={[styles.feedbackView,{paddingVertical: height * 0.030}]}>
        <Text allowFontScaling={false} style={styles.feedbackText}>
          {' '}
          {languageResource.Select_language_of_your_feedback}
        </Text>
        <View>
          <FlatList
            scrollEnabled={false}
            data={languages}
            renderItem={({ item }) => {
              return (
                <TouchableOpacity
                  style={[
                    styles.item,
                    {
                      backgroundColor: item.id === selectedId ? COLORS.BLUE : COLORS.WHITE,
                    },
                  ]}
                  onPress={() => {
                    setSelectedId(item.id);
                    dispatch(setFeedbackLanguage(item.id));
                    onLanguageSelect();
                  }}>
                  <Text
                    allowFontScaling={false}
                    style={{
                      color: item.id === selectedId ? COLORS.WHITE : COLORS.BLACK,
                      fontFamily:"SEGOEUI"
                    }}>
                    {item.language}
                  </Text>
                  {item.id === selectedId ? (
                    <Image
                      resizeMode={'contain'}
                      style={styles.activeNonActive}
                      source={images.active}
                    />
                  ) : (
                    <Image
                      resizeMode={'contain'}
                      style={styles.activeNonActive}
                      source={images.nonactive}
                    />
                  )}
                </TouchableOpacity>
              );
            }}
            keyExtractor={(item) => item.id}
            extraData={selectedId}
          />
        </View>
      </View>
    </ImageBackground>
  );
};

export default SelectLanguage;
