import React, { Component } from 'react';
import { StyleSheet, View, ScrollView, Text, Image, Dimensions, TouchableOpacity, AsyncStorage, KeyboardAvoidingView } from 'react-native';
const { width, height } = Dimensions.get("window");
import { onSignIn } from "./auth";
import { Container, Header, Content, Form, Input, Label, Item, Button } from 'native-base';
import background from "../../images/blurry-blue.jpg";
import mark from  "../../images/MarriageIconcolor1.png";
import axios from 'axios';
import { BACKEND_URL } from '../../config.js'

class LoginScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      userName: null,
      password: null
    }
    this.signIn = this.signIn.bind(this)
  }

  signIn() {
    var thiss=this;
    axios.post(BACKEND_URL+'/api/User/login', {
      userName: this.state.userName,
      password: this.state.password
    })
    .then(function (response) {
      if(response.data.message == 'Success'){
        // Set up root Auth Token and Headers
        axios.defaults.headers.common['Authorization'] = "bearer "+response.data.data.accessToken;
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        AsyncStorage.setItem('@userData:', JSON.stringify(response.data.data));
        onSignIn().then(() => console.log("auth set"));
        console.log("thiss.props.navigation",thiss.props)
        thiss.props.navigation.navigate('asder')
        thiss.setState({ isLoading: false });
      }
    })
    .catch(function (error) {
      alert("Please check your crendentials")
    });
  }

  render() {
    return(
      <View style={{ flex: 1, flexDirection: 'column' }}>
        <Image source={background} style={styles.background} resizeMode="cover">
          <View style={{ width: '100%', height: '40%', paddingVertical: 30 }}>
            <Image source={mark} style={styles.mark} resizeMode="contain" />
          </View>
          <View style={{ width: '98%', height: '60%' }}>
            <Form>
              <KeyboardAvoidingView behavior="padding">
                <Item floatingLabel>
                  <Label>Username</Label>
                  <Input onChangeText={(value) =>  this.setState({ userName: value })  }/>
                </Item>
                <Item floatingLabel>
                  <Label>Password</Label>
                  <Input onChangeText={(value) =>  this.setState({ password: value })  }/>
                </Item>
              </KeyboardAvoidingView>
            </Form>
            <TouchableOpacity activeOpacity={.1}>
              <View>
                <Text style={styles.forgotPasswordText}>Forgot Password?</Text>
              </View>
            </TouchableOpacity>
            <Button block style={{ backgroundColor:'#FF0000', margin: 15, marginTop: 25 }}  onPress={this.signIn} >
              <Text style={{ color: '#FFFFFF' }}>Sign In</Text>
            </Button>
            <TouchableOpacity activeOpacity={.1} onPress={() => this.props.navigation.navigate('signUp')}>
              <View>
              <Text style={styles.signupWrapper}>Don't have an account? Sign up</Text>
              </View>
            </TouchableOpacity>
          </View>
        </Image>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  background: {
    width: null,
    height: null,
    flex: 1,
  },
  markWrap: {
    flex: 1,
    paddingVertical: 30,
  },
  mark: {
    width: null,
    height: null,
    flex: 1,
  },
  forgotPasswordText: {
    color: "white",
    backgroundColor: "transparent",
    textAlign: "right",
    paddingTop: 5,
    fontSize:12
  },
  signupWrapper: {
    textAlign:'center',
    color: "black",
    textDecorationLine: 'underline'
  }
});

export default LoginScreen;