import React, {memo, useState } from 'react';
import { Image,View, Text,TouchableOpacity,StyleSheet } from 'react-native';
import { shallowEqual, useSelector, useDispatch } from 'react-redux';
import { useTheme } from '@react-navigation/native';


import Background from '../common/Background';
import Logo from '../common/Logo';
import Header from '../common/Header';
import Button from '../common/Button';
import TextInput from '../common/TextInput';
import Loader from "../common/Loader";
import  ModalPopup  from "../common/Modal";
import { emailValidator, passwordValidator } from '../../core/util';
import { theme } from "../../core/theme";
import { login, actionTypes } from 'actions/UserActions';

const LoginScreen = ({ navigation }) => {

  const images = {
    backgroundimage: require('../../assets/backgroundimage/top_bottom.png'),
    logoImage: require('../../assets/alllogo/colourlogo.png')
  };
  const dispatch = useDispatch();

  const [email, setEmail] = useState({ value: '', error: '' });
  const [password, setPassword] = useState({ value: '', error: '' });

  const _onLoginPressed = () => {
    dispatch(login(email, password));

    // const emailError = emailValidator(email.value);
    // const passwordError = passwordValidator(password.value);

    // if (emailError || passwordError) {
    //   setEmail({ ...email, error: emailError });
    //   setPassword({ ...password, error: passwordError });
    //   return;
    // }

    // navigation.navigate('Dashboard');
  };
  
  const styles = StyleSheet.create({
    loginText: {
      width: '100%',
      color: 'white',
      fontWeight: 'bold',
      fontSize: 47,
      textAlign:'center',
      marginTop:8,
      
    },
    loginTextBellow: {
      width: '100%',
      color: 'white',
      fontSize: 19,
      textAlign:'center',
      marginTop:0,
      
    },
    logoImage:{
      width: '100%',
      height: 50,
      marginTop: 90,
      marginBottom:50,
    },
    forgotPassword: {
      width: '100%',
      alignItems: 'flex-end',
      marginBottom: 24,
    },
    row: {
      flexDirection: 'row',
      marginTop: 4,
    },
    label: {
      color: theme.colors.secondary,
    },
    link: {
      fontWeight: 'bold',
      color: theme.colors.primary,
    },
  });
  return (

    <Background>
      <Logo />
      <Header>Welcome back.</Header>
      <ModalPopup></ModalPopup>
<Loader 
isloading="true" 
theme={theme.colors.secondary}
size="small"
></Loader>
      <TextInput
        label="Email"
        returnKeyType="next"
        value={email.value}
        onChangeText={text => setEmail({ value: text, error: '' })}
        error={!!email.error}
        errorText={email.error}
        autoCapitalize="none"
        autoCompleteType="email"
        textContentType="emailAddress"
        keyboardType="email-address"
      />

      <TextInput
        label="Password"
        returnKeyType="done"
        value={password.value}
        onChangeText={text => setPassword({ value: text, error: '' })}
        error={!!password.error}
        errorText={password.error}
        secureTextEntry
      />

      {/* <View style={styles.forgotPassword}>
        <TouchableOpacity
          onPress={() => navigation.navigate('ForgotPasswordScreen')}
        >
          <Text style={styles.label}>Forgot your password?</Text>
        </TouchableOpacity>
      </View> */}

      <Button mode="contained" onPress={_onLoginPressed} >
        Next
      </Button>

      {/* <View style={styles.row}>
        <Text style={styles.label}>Don’t have an account? </Text>
        <TouchableOpacity onPress={() => navigation.navigate('RegisterScreen')}>
          <Text style={styles.link}>Sign up</Text>
        </TouchableOpacity>
      </View> */}
    
    </Background>
    
  );
  }

  export default memo(LoginScreen);
