import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  I18nManager,
  Button,
  TouchableOpacity,
} from 'react-native';
import React, {useEffect} from 'react';
import styles from './style';
import {useState} from 'react';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import {t} from 'i18next';
import SplashScreenComp from '../../Components/SplashScreen/SplashScreen';
import {useTranslation} from 'react-i18next';
import RNRestart from 'react-native-restart';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {default as AntDesignIcon} from 'react-native-vector-icons/AntDesign';
import LottieView from 'lottie-react-native';

const Login = () => {
  const [text, setText] = useState();
  const [animation, setAnimation] = useState(true);
  const {t, i18n} = useTranslation();
  useEffect(() => {
    setTimeout(() => {
      setAnimation(false);
      console.log('false');
    }, 3000);
    const getData = async () => {
      try {
        const value = await AsyncStorage.getItem('language');
        console.log(value, 'This is get value');
        if (value !== null) {
          if (value === 'en') {
            I18nManager.forceRTL(false);
            i18n.changeLanguage('en');
          } else if (value === 'ur') {
            I18nManager.forceRTL(true);
            i18n.changeLanguage('ur');
          }
        } else {
          try {
            await AsyncStorage.setItem('language', 'ur');
          } catch (e) {
            console.log(e);
          }
        }
      } catch (e) {
        console.log(e);
      }
    };
    getData();
  }, []);

  const english = async () => {
    try {
      await AsyncStorage.setItem('language', 'en');
      I18nManager.forceRTL(false);
      RNRestart.Restart();
    } catch (e) {
      console.log(e);
    }
  };

  const urdu = async () => {
    try {
      await AsyncStorage.setItem('language', 'ur');
      I18nManager.forceRTL(true);
      RNRestart.Restart();
    } catch (e) {
      console.log(e);
    }
  };

  return (
    // <KeyboardAwareScrollView>

      // {/* <Button onPress={() => english()} title="English" color="#841584" />
      // <Button
      //   style={{marginTop: 210}}
      //   onPress={() => urdu()}
      //   title="URDU"
      //   color="#000"
      // /> */}
      <View style={styles.container}>
        <View style={styles.imgContainer}>
          <Image
            style={{width: 150, height: 230}}
            source={require('../../Assets/images/baitussalam-logo.png')}
          />
          <LottieView
            source={require('../../Assets/book-animation.json')}
            autoPlay={animation}
            loop={false}
            width={180}
            height={300}
            stop={true}
            speed={1.5}
          />
        </View>
        <View style={styles.inputContainer}>
          <View style={styles.passwordInput}>
            <TextInput
              style={styles.input}
              onChangeText={() => setText()}
              value={text}
              placeholder={t('username')}
            />
          </View>
          <View style={styles.passwordInput}>
            <TextInput
              style={[styles.input, I18nManager.isRTL ? 'right' : 'left']}
              onChangeText={() => setText()}
              value={text}
              placeholder={t('password')}
              // secureTextEntry={true}
            />
          </View>
        </View>
        <TouchableOpacity style={styles.buttonContainer}>
          <AntDesignIcon name="right" style={styles.buttonIcon} />
        </TouchableOpacity>
      </View>
    // </KeyboardAwareScrollView>
  );
};

export default Login;
