/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */

import React, { useRef } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  TextInput,
  Button,
  Alert,
  TouchableOpacity,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import LinearGradient from 'react-native-linear-gradient';

declare const global: {HermesInternal: null | {}};

const App = () => {

  const passwordInput = useRef();
  const [data, setData] = React.useState({
    username: '',
    password: '',
    isValidUser: true,
    isValidPassword: true,
  })

  const validUserCheck = (val:string) => {
    var validLength:boolean = val.trim().length >= 6

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

  const handleUsernameUpdate = (val:string) => {
    var validLength:boolean = val.trim().length >= 6

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

  const handlePasswordUpdate = (val:string) => {
    var validLength:boolean = val.trim().length >= 8

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

  const handleLogin = () => {
    if (data.isValidUser && data.isValidPassword) {
      Alert.alert(`My favorite Girl Scout Cookies are taggalongs! What are yours ${data.username}?`)
    }
  }

  return (
    <>
      <StatusBar
        barStyle='light-content'
      />
      <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('./src/assets/sign_in_logo.png')}
              style={styles.logo}
            />
            <TextInput
              accessibilityLabel="Username text entry box"
              accessibilityHint="Enter your tagg username here"
              style={styles.credentials}
              placeholder="Username"
              placeholderTextColor='#FFFFFF'
              autoCompleteType='username'
              textContentType='username'
              returnKeyType='next'
              keyboardType='ascii-capable'
              onChangeText={user => handleUsernameUpdate(user)}
              defaultValue={data.username}
              onEndEditing={(val) => validUserCheck(val.nativeEvent.text)}
              onSubmitEditing={() => {passwordInput.current.focus()}}
              blurOnSubmit={false}
            />
            { data.isValidUser ? null : 
              <Text style={styles.invalidCredentials}>Username must be at least 6 characters long.</Text>
            }
            <TextInput
              accessibilityLabel="Password text entry box"
              accessibilityHint="Enter your tagg password here"
              style={styles.credentials}
              placeholder="Password"
              placeholderTextColor='#FFFFFF'
              autoCompleteType='password'
              textContentType='password'
              returnKeyType='go'
              onChangeText={pass => handlePasswordUpdate(pass)}
              defaultValue={data.password}
              onSubmitEditing={() => handleLogin()}
              ref={passwordInput}
              secureTextEntry={true}
            />
            { data.isValidPassword ? null : 
              <Text style={styles.invalidCredentials}>Password must be at least 8 characters long.</Text>
            }
            <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>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  linearGradient: {
    flex: 1,
    alignItems: 'center',
  },
  logo: {
    top: 165,
    width: 215,
    height: 149,
  },
  credentials: {
    top: 190,
    width: 248,
    height: 40,
    fontSize: 20,
    color: '#FFFFFF',
    borderColor: '#FFFDFD',
    borderWidth: 2,
    borderRadius: 20,
    paddingLeft: 13,
    marginVertical: 15,
  },
  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 App;