/**
 * 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: '',
  })

  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 => setData({...data, username: user})}
              defaultValue={data.username}
              onSubmitEditing={() => {passwordInput.current.focus()}}
              blurOnSubmit={false}
            />
            <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 => setData({...data, password: pass})}
              defaultValue={data.password}
              onSubmitEditing={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}
              ref={passwordInput}
              secureTextEntry={true}
            />
            <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={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}>
                <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: 215,
    width: 248,
    height: 40,
    fontSize: 20,
    color: '#FFFFFF',
    borderColor: '#FFFDFD',
    borderWidth: 2,
    borderRadius: 20,
    paddingLeft: 13,
    marginVertical: 15,
  },
  forgotPassword: {
    top: 215,
    left: -60,
  },
  forgotPasswordText: {
    fontSize: 15,
    color: '#FFFFFF',
    textDecorationLine: 'underline',
  },
  start: {
    top: 220,
    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: 235,
    color: '#F4DDFF',
  }
});

export default App;