import React from 'react';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import {
  View,
  Text,
  Alert,
  StatusBar,
  Image,
  TouchableOpacity,
  StyleSheet,
  Keyboard,
  TouchableWithoutFeedback,
} from 'react-native';

import {RootStackParams} from '../routes';
import LinearGradient from 'react-native-linear-gradient';

import LoginInput from '../components/common/LoginInput';

type LoginScreenRouteProp = RouteProp<RootStackParams, 'Login'>;
type LoginScreenNavigationProp = StackNavigationProp<RootStackParams, 'Login'>;

interface LoginProps {
  route: LoginScreenRouteProp;
  navigation: LoginScreenNavigationProp;
}
const Login = ({navigation}: LoginProps) => {
  // const passwordInput = useRef();
  const [data, setData] = React.useState({
    username: '',
    password: '',
    isValidUser: true,
    isValidPassword: true,
    focusPasswordInput: false,
  });

  /*
    Updates the state of username. Also verifies the input of the Username field.
  */
  const handleUsernameUpdate = (val: string) => {
    let validLength: boolean = val.trim().length >= 6;

    if (validLength) {
      setData({
        ...data,
        username: val,
        isValidUser: true,
      });
    } else {
      setData({
        ...data,
        username: val,
        isValidUser: false,
      });
    }
  };

  /*
    Updates the state of password. Also verifies the input of the Password field.
  */
  const handlePasswordUpdate = (val: string) => {
    let validLength: boolean = val.trim().length >= 8;

    if (validLength) {
      setData({
        ...data,
        password: val,
        isValidPassword: true,
      });
    } else {
      setData({
        ...data,
        password: val,
        isValidPassword: false,
      });
    }
  };

  /*
    Handler for the Let's Start button or the Go button on the keyboard.
  */
  const handleLogin = () => {
    if (data.isValidUser && data.isValidPassword) {
      Alert.alert(
        `My favorite Girl Scout Cookies are taggalongs! What are yours ${data.username}?`,
      );
      navigation.navigate('Registration');
    }
  };

  /*
    Handler for the submit button on the Username keyboard
  */
  const handleUsernameSubmit = () => {
    // setData({
    //   ...data,
    //   focusPasswordInput: true,
    // });
    Alert.alert('Coming soon 🚧');
  };

  return (
    <>
      <StatusBar barStyle="light-content" />
      <TouchableWithoutFeedback
        onPress={() => {
          Keyboard.dismiss();
        }}>
        <View style={styles.container}>
          <LinearGradient
            colors={['#8F00FF', '#6EE7E7']}
            style={styles.linearGradient}
            useAngle={true}
            angle={154.72}
            angleCenter={{x: 0.5, y: 0.5}}>
            <Image
              source={require('../assets/images/logo.png')}
              style={styles.logo}
            />
            <LoginInput
              type={data.username}
              isUsername={true}
              onChangeText={(user) => handleUsernameUpdate(user)}
              onSubmitEditing={() => handleUsernameSubmit()}
              isValid={data.isValidUser}
              validationWarning={'Username must be at least 6 characters long.'}
            />
            <LoginInput
              type={data.password}
              isPassword={true}
              onChangeText={(user) => handlePasswordUpdate(user)}
              focusPasswordInput={data.focusPasswordInput}
              onSubmitEditing={() => handleLogin()}
              isValid={data.isValidPassword}
              validationWarning={'Password must be at least 8 characters long.'}
            />
            <TouchableOpacity
              accessibilityLabel="Forgot password button"
              accessibilityHint="Select this if you forgot your tagg password"
              style={styles.forgotPassword}
              onPress={() => Alert.alert("tagg! You're it!")}>
              <Text style={styles.forgotPasswordText}>Forgot password</Text>
            </TouchableOpacity>
            <TouchableOpacity
              accessibilityLabel="Let's start button"
              accessibilityHint="Select this after entering your tagg username and password"
              style={styles.start}
              onPress={() => handleLogin()}>
              <Text style={styles.startText}>Let's Start!</Text>
            </TouchableOpacity>
            <Text
              accessible={true}
              accessibilityLabel="New to tagg?"
              style={styles.newUser}>
              New to tagg?{' '}
              <Text
                accessible={true}
                accessibilityLabel="Get started"
                accessibilityHint="Select this if you do not have a tagg account"
                style={styles.getStarted}
                onPress={() =>
                  Alert.alert('I get the tagg flip it and tumble it.')
                }>
                Get started!
              </Text>
            </Text>
          </LinearGradient>
        </View>
      </TouchableWithoutFeedback>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  linearGradient: {
    flex: 1,
    alignItems: 'center',
  },
  logo: {
    top: 165,
    width: 215,
    height: 149,
  },
  forgotPassword: {
    top: 190,
    left: -60,
  },
  forgotPasswordText: {
    fontSize: 15,
    color: '#FFFFFF',
    textDecorationLine: 'underline',
  },
  start: {
    top: 195,
    width: 144,
    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderRadius: 20,
    marginTop: 15,
  },
  startText: {
    fontSize: 15,
    color: '#78A0EF',
    fontWeight: 'bold',
  },
  getStarted: {
    color: '#FFFFFF',
    textDecorationLine: 'underline',
  },
  newUser: {
    top: 240,
    color: '#F4DDFF',
  },
  invalidCredentials: {
    top: 180,
    color: '#F4DDFF',
  },
});

export default Login;