/**
 * 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();

  return (
    <>
      <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
            style={styles.credentials}
            placeholder="Username"
            placeholderTextColor='#FFFFFF'
            returnKeyType='next'
            onSubmitEditing={() => {passwordInput.current.focus()}}
            blurOnSubmit={false}
            autoCompleteType='username'
            textContentType='username'
            keyboardType='ascii-capable'
          />
          <TextInput
            ref={passwordInput}
            style={styles.credentials}
            placeholder="Password"
            placeholderTextColor='#FFFFFF'
            secureTextEntry={true}
            autoCompleteType='password'
            textContentType='password'
            returnKeyType='go'
          />
          <View style={styles.forgotPassword}>
            <Button
              onPress={() => Alert.alert("tagg! You're it!")}
              title="Forgot password"
              color='#FFFFFF'
              accessibilityLabel="Forgot password button"
            />
          </View>
          <TouchableOpacity style={styles.start} onPress={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}>
            <Text style={styles.startText}>Let's Start!</Text>
          </TouchableOpacity>
          <Text style={styles.newUser}>
            New to tagg? <Text 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,
    borderColor: '#FFFDFD',
    borderWidth: 2,
    borderRadius: 20,
    width: 248,
    height: 40,
    paddingLeft: 13,
    marginVertical: 15,
    fontSize: 15,
    color: '#FFFFFF'
  },
  forgotPassword: {
    top: 200,
    left: -50
  },
  start: {
    top: 220,
    backgroundColor: '#FFFFFF',
    width: 144,
    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20
  },
  startText: {
    color: '#78A0EF',
    fontWeight: 'bold',
    fontSize: 15
  },
  getStarted: {
    color: '#FFFFFF',
  },
  newUser: {
    top: 230,
    color: '#F4DDFF',
  }
});

export default App;