import React, { useState } from 'react';
import { View, Text, Image, Alert } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import IMAGES from '../../../constants/Images';
import { styles } from './style';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useDispatch } from 'react-redux';
import CustomTextInput from '../../../components/CustomTextInput';
import CustomButton from '../../../components/CustomButton';
import Background from '../../../components/Background';

const Login = ({ navigation }) => {
  const [loading, setLoading] = useState(false);
  const dispatch = useDispatch();
  const [username, setUsername] = useState('');

  return (
    <Background barcolor="light-content">
      <KeyboardAwareScrollView style={styles.container} contentContainerStyle={{ justifyContent: 'center', flex: 1 }}>
        <View style={styles.logoContainer}>
          <Image style={styles.appLogo} source={IMAGES.AppLogo} />
        </View>
        <View style={styles.titleContainer}>
          <Text style={styles.titleText}>Log In</Text>
        </View>
        <View style={{ marginTop: 50 }}>
          <CustomTextInput label="Username" value={username} onChangeText={setUsername}
          />
        </View>
        <View style={{ marginTop: 100 }}>
          <CustomButton onPress={() => navigation.navigate('VerifyOTP')} title={'Login'} style={styles.btnbg} textstyle={styles.btntext} />
        </View>
      </KeyboardAwareScrollView>
    </Background>
  );
};

export default Login;
