import React, {useEffect, useState} from 'react';
import {
  Button,
  SafeAreaView,
  Dimensions,
  TouchableOpacity,
  Text,
  View,
  Image,
} from 'react-native';
import Swiper from 'react-native-swiper';
import {IMAGES, BgIntroduce} from '../../../values/images';
import colors from '../../../values/colors';
import string from '../../../values/string';
import styles from './styles';
import RootNavigation from '../../../navigation/RootNavigation';
import TextInputComponent from '../../../components/TextInputComponent';
import ButtonComponent from '../../../components/ButtonComponent';
import LoadingProgress from '../../../components/LoadingProgress';
import {APP_NAVIGATE_SCREEN} from '../../../utils/constant';
import LinearGradient from 'react-native-linear-gradient';
import Alert from 'react-native-awesome-alerts';
import {useTranslation} from 'react-i18next';
import SelectDropdown from 'react-native-select-dropdown';

const windowHeight = Dimensions.get('window').height;

const LoginScreen = ({
  loading,
  showPass,
  navigateToServer,
  handleLogin,
  setShowPass,
  userAccount,
  handleUserName,
  handlePassword,
  showAlert,
  hideAlert
}) => {
  const {t, i18n} = useTranslation();
  return (
    <SafeAreaView style={styles.slide5}>
      <View style={styles.slide5}>
        <View style={{flex: 1}}>
          <Image source={BgIntroduce.BgTop} style={[styles.bgFullWidth]} />
        </View>
        <View style={[styles.loginContainer, {flex: 4, alignItems: 'center'}]}>
          <View style={styles.viewLogin}>
            <Text style={[styles.textTitleHeader, styles.textBlue]}>
              {t('Login')}
            </Text>
            <Text style={{color: 'black'}}>{t('Email')}</Text>
            <TextInputComponent
              styleAreaInput={{backgroundColor: colors.white}}
              placeholder={t('Enter_your_email')}
              keyboardType={'email-address'}
              onChangeText={handleUserName}
              value={userAccount.username}
              leftIcon={IMAGES.IcMail}
            />
            <Text style={{color: 'black'}}>{t('Password')}</Text>
            <TextInputComponent
              styleAreaInput={{backgroundColor: colors.white}}
              placeholder={t('Enter_your_password')}
              onChangeText={handlePassword}
              value={userAccount.password}
              rightIcon={showPass ? IMAGES.IcVisibleEye : IMAGES.IcHideEye}
              onPressRightIcon={() => {
                setShowPass(!showPass);
              }}
              secureTextEntry={showPass}
              leftIcon={IMAGES.IcLock}
            />
            <Text
              style={styles.forgetPassword}
              onPress={() => {
                RootNavigation.navigate(APP_NAVIGATE_SCREEN.FORGOT_PASS);
              }}>
              {t('Forgot_password')}
            </Text>
            <ButtonComponent
              style={[
                styles.loginScreenBtn,
                {backgroundColor: colors.primary_blue},
              ]}
              text={t('Login')}
              textStyle={{color: colors.white, fontWeight: 'bold'}}
              onPress={handleLogin}
              backgroundColor={colors.white}
              bordered={true}
            />
            <ButtonComponent
              style={[styles.loginScreenBtn, {marginBottom: 20}]}
              text={t('Back')}
              textStyle={{color: colors.primary_blue, fontWeight: 'bold'}}
              onPress={navigateToServer}
            />
          </View>
        </View>
        <View style={{flex: 1, justifyContent: 'flex-end'}}>
          <Text style={{marginLeft: 20}}>2022 @ MeU Solutions, Inc</Text>
          <Image source={BgIntroduce.BgFtStep1} style={styles.bgFullWidth} />
        </View>
        {loading && <LoadingProgress />}
      </View>
      <Alert
        show={showAlert.isError}
        showProgress={false}
        title={showAlert.title}
        message={showAlert.message}
        closeOnTouchOutside={true}
        closeOnHardwareBackPress={false}
        showConfirmButton={true}
        confirmText="Đóng"
        confirmButtonColor="#DD6B55"
        onConfirmPressed={hideAlert}
      />
    </SafeAreaView>
  );
};

export default LoginScreen;
