import React from "react";
import { View, Text, Image, TextInput, StyleSheet } from "react-native";
import { Button } from "native-base";
import { SocialIcon } from "react-native-elements";
const logo = require("../../images/BlueLogo.jpg");

export default class LoginView extends React.Component {
  constructor() {
    super();
    // this.handleTextChange = this.handleTextChange.bind(this);
    this.state = { username: "", password: "" };
  }

  render() {
    const { username, password } = this.state;
    return (
      <View style={{ flex: 1 }}>
         <Image source={logo} />
         <View>
          {/* <TextInput
            value={username}
            placeholder="Username"
            onChangeText={text => this.setState({ username: text })}
            style={styles.inputs}
          />
          <TextInput
            value={password}
            placeholder="Password"
            onChangeText={text => this.setState({ password: text })}
            secureTextEntry
            style={styles.inputs}
          /> */}
        </View>
        <Text style={{ textAlign: "right" }}>Forgot password</Text>
        <View style={{ marginLeft: 65, marginTop: 10 }}>
           <Button
            large
            blue
            center
            rounded
            onPress={() => alert(username, password)}
          >
            <Text style={{ color: "white", marginHorizontal: 50 }}>Login</Text>
          </Button>
        </View>
        <Text style={{ textAlign: "center", marginTop: 15 }}>Or</Text>
        <View style={styles.socialButtons}>
          <SocialIcon type="facebook" />
          <SocialIcon type="google-plus-official" />
        </View>
        <View style={{ flexDirection: "row", marginTop: 15 }}>
          <Text>Don't have an account?</Text>
          <Text style={{ color: "blue" }}> {"  "}Sign Up</Text>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  inputs: {
    height: 50,
    width: 300,
    borderWidth: 1,
    borderColor: "grey",
    paddingRight: 10,
    textAlign: "left",
    marginTop: 5
  },
  button: {
    backgroundColor: "#005074"
  },
  socialButtons: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginHorizontal: 50
  }
});