import Geolocation from "@react-native-community/geolocation";
import React, { Component } from "react";
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  ScrollView,
  Image,
  BackHandler,
  Keyboard,
  TouchableOpacity,
  Picker,
} from "react-native";
import { CommonActions } from "@react-navigation/native";
import {
  Icon,
  Card,
  CardItem,
  Left,
  Body,
  Right,
  Col,
  Row,
  Thumbnail,
  Button,
} from "native-base";
import Snackbar from "react-native-snackbar";
import {
  api_url,
  register,
  height_20,
  logo_with_name,
  app_name,
  register_image,
  font_title,
  font_description,
  get_blood_list,
  api_url1,
} from "../config/Constants";
import { StatusBar, Loader } from "../components/GeneralComponents";
import * as colors from "../assets/css/Colors";
import axios from "axios";

import { connect } from "react-redux";
import {
  serviceActionPending,
  serviceActionError,
  serviceActionSuccess,
} from "../actions/RegisterActions";

import AsyncStorage from "@react-native-community/async-storage";
import { Input } from "react-native-elements";
import call from "../assets/icons/call.png";
import person from "../assets/icons/person.png";
import pass from "../assets/icons/pass.png";
import email from "../assets/icons/email.png";
import back from "../assets/icons/back1.png";
class AddressEnter extends Component<Props> {
  constructor(props) {
    super(props);
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
    this.state = {
      address: "",
 
     
      validation: true,
      blood_group_list: [],
      fcm_token: global.fcm_token,
      country: "",
      // region: "",
      latitude: "",
      longitude: "",
      coords: "",
      pincode:'',
      city:'',
      State:''
      
    };
    // this.get_blood_list();
    this.handleUserNavigation();
  }

  componentWillMount() {
    BackHandler.addEventListener(
      "hardwareBackPress",
      this.handleBackButtonClick
    );
  }

  componentWillUnmount() {
    BackHandler.removeEventListener(
      "hardwareBackPress",
      this.handleBackButtonClick
    );
  }

  handleBackButtonClick() {
    this.props.navigation.navigate("AddressList");
    return true;
  }

  // selectCountry(val) {
  //   this.setState({ country: val });
  // }

  // selectRegion(val) {
  //   this.setState({ region: val });
  // }

  login = () => {
    this.props.navigation.navigate("Login");
  };

  home = () => {
    this.props.navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [{ name: "Home" }],
      })
    );
  };


  handleUserNavigation = async () => {
   try{
    await Geolocation.getCurrentPosition((info) => {
    this.setState({
      latitude: info.coords.latitude,
      longitude: info.coords.longitude,
      coords: info.coords,
    });

    console.log(info);
  })}
  catch(error){alert(error)} 

  }



  register = async () => {
    this.handleUserNavigation();
    Keyboard.dismiss();
    // await this.checkValidate();
    // if (this.state.validation)
    //   this.props.serviceActionPending();
    // let countries = Country.getAllCountries();
    // console.log(countries[0].name);
    await axios
      .post(
        `${api_url1}/clients/address/add`,

        {
          addressLine1: this.state.address,
          pincode: this.state.pincode,
          city: this.state.city,
          state: this.state.State,
          country: this.state.country,
          latitude:this.state.latitude,
          longitude: this.state.longitude,
        },
        { headers: { Authorization: `Bearer ${global.fcm_token}` } }
      )
      .then(async (response) => {
        console.log(response);
        //   await this.props.serviceActionSuccess(response.data);
        //   await this.saveData();
        // login()
        //   console.log(response);
          alert("Address Added");
          this.props.navigation.navigate("AddressList");
      })
      .catch((error) => {
        console.log(error);
      });
  };

  get_blood_list = async () => {
    await axios({
      method: "get",
      url: api_url + get_blood_list,
    })
      .then(async (response) => {
        this.setState({ blood_group_list: response.data.result });
      })
      .catch((error) => {
        alert("Sorry, something went wrong!");
      });
  };

  saveData = async () => {
    if (this.props.status == 1) {
      try {
        await AsyncStorage.setItem("user_id", this.props.data.id.toString());
        await AsyncStorage.setItem(
          "username",
          this.props.data.customer_name.toString()
        );
        await AsyncStorage.setItem(
          "number",
          this.props.data.phone_number.toString()
        );
        await AsyncStorage.setItem("email", this.props.data.email.toString());
        global.id = await this.props.data.id;
        global.username = await this.props.data.customer_name;
        global.number = await this.props.data.phone_number;
        global.email = await this.props.data.email;
        await this.home();
      } catch (e) {}
    } else {
      alert(this.props.message);
    }
  };

  checkValidate=()=> {
    if(
        this.state.address == "" ||
      this.state.pincode == "" ||
      this.state.city == "" ||
      this.state.country == "" ||
      this.state.State == "" ||
      this.state.latitude == "" ||
      this.state.longitude==""
    ) {
      // this.state.validation = false;
      alert("Please fill all the fields.");
      // return true;
    } else {
      // this.state.validation = true;
      // return true;
      this.register();    }
  }

  select_blood_group = (value) => {
    this.setState({ blood_group: value });
  };

  showSnackbar(msg) {
    Snackbar.show({
      title: msg,
      duration: Snackbar.LENGTH_SHORT,
    });
  }

  render() {
    const { isLoding, error, data, message, status } = this.props;

    let bl_list = this.state.blood_group_list.map((s, i) => {
      return (
        <Picker.Item key={i} value={s.blood_group} label={s.blood_group} />
      );
    });

    return (
      <View style={styles.container}>
        <View>
          <StatusBar />
        </View>
        <Loader visible={isLoding} />
        <View>
          <View>
         
          </View>
          <View style={styles.reg_style1}>
            <TouchableOpacity
              style={styles.reg_style2}
              onPress={this.handleBackButtonClick}
              activeOpacity={1}
            >
              {/* <Icon
                onPress={this.handleBackButtonClick}
                style={styles.reg_style3}
                name="arrow-back"
              />  */}
              <Image
                style={{
                  width: 20,
                  height: 20,
                  backgroundColor: "white",
                  marginVertical: 6,
                  marginLeft: 2,
                }}
                source={back}
              />
            </TouchableOpacity>
            <View style={styles.reg_style4} />
            <Text style={styles.reg_style5}>Enter Your location</Text>
          </View>
        </View>
        <ScrollView keyboardShouldPersistTaps="always">
          <View style={styles.reg_style6}>
            {/* <View style={styles.reg_style8}>
              {/* <Image style={styles.reg_style9} source={logo_with_name} /> */}
            {/* </View> */}
            <View style={styles.reg_style10} />
            <View style={styles.reg_style11}>
              <Input
                inputStyle={styles.reg_style12}
                label="Address line 1"
                labelStyle={styles.reg_style13}
                placeholder="Your home Address"
                leftIcon={
                  // <Icon
                  //   name="person"
                  //   size={20}
                  //   color="black"
                  //   style={styles.reg_style14}
                  // />
                  <Image style={{ width: 22, height: 22 }} source={person} />
                }
                onChangeText={(TextInputValue) =>
                  this.setState({ address: TextInputValue })
                }
              />
            </View>
            <View style={styles.reg_style15}>
              <Input
                inputStyle={styles.reg_style16}
                label="Pincode"
                labelStyle={styles.reg_style17}
                placeholder="+"
                //     leftIcon={
                //       // <Icon
                //       //   name="call"
                //       //   size={20}
                //       //   color="black"
                //       //   style={styles.reg_style18}
                //       // />
                //       <Image
                //       style={{  width: 22,
                //      height: 22,}}
                //      source={call}

                //    />
                //     }
                keyboardType="phone-pad"
                onChangeText={(TextInputValue) =>
                  this.setState({ pincode: TextInputValue })
                }
              />
            </View>

           
            <View style={styles.reg_style19}>
              <Input
                inputStyle={styles.reg_style20}
                label="City"
                labelStyle={styles.reg_style21}
                placeholder="eg:Delhi"
                //     leftIcon={
                //       // <Icon
                //       //   name="mail"
                //       //   size={20}
                //       //   color="black"
                //       //   style={styles.reg_style22}
                //       // />
                //       <Image
                //       style={{  width: 22,
                //      height: 22,}}
                //      source={email}

                //    />
                //     }
                keyboardType="email-address"
                onChangeText={(TextInputValue) =>
                  this.setState({ city: TextInputValue })
                }
              />
            </View>
            <Text>
              {/* wdhu {this.state.latitude} */}
            </Text>
            <View style={styles.reg_style23}>
              <Input
                inputStyle={styles.reg_style24}
                placeholder="eg. Mahahrashtra"
                label="State"
                labelStyle={styles.reg_style25}
                // leftIcon={
                //   // <Icon
                //   //   name="key"
                //   //   size={20}
                //   //   color="black"
                //   //   style={styles.reg_style26}
                //   // />
                //   <Image
                //    style={{  width: 22,
                //   height: 22,}}
                //   source={pass}

                // />
                // }
                // secureTextEntry={true}
                onChangeText={(TextInputValue) =>
                  this.setState({ State: TextInputValue })
                }
              />
            </View>
            
            <View style={styles.reg_style11}>
              <Input
                inputStyle={styles.reg_style12}
                label="Country"
                labelStyle={styles.reg_style13}
                placeholder="Your home Address"
                // leftIcon={
                //   // <Icon
                //   //   name="person"
                //   //   size={20}
                //   //   color="black"
                //   //   style={styles.reg_style14}
                //   // />
                //   <Image style={{ width: 22, height: 22 }} source={person} />
                // }
                onChangeText={(TextInputValue) =>
                  this.setState({ country: TextInputValue })
                }
              />
            </View>
        <Text>
          {/* {this.state.country} */}
        </Text>
            <Text
            style={styles.reg_style13}
            >
              Your location : {this.state.latitude} , {this.state.longitude}
         
            </Text>
            <Text
            style={styles.reg_style13}
            >
           
              Accuracy:({this.state.coords.accuracy})
            </Text>
            {/* <View style={styles.reg_style27}> */}
            {/* <Text style={styles.reg_style28}>Blood Group</Text>
              <Picker
                selectedValue={this.state.blood_group}
                style={styles.reg_style29}
                onValueChange={(itemValue, itemIndex) =>
                  this.select_blood_group(itemValue)
                }
              >
                {bl_list}
              </Picker>
            </View> */}
            <View style={styles.reg_style30} />
            <View style={styles.reg_style31}>
              <Button block style={styles.reg_style32} onPress={this.checkValidate}>
                <Text style={styles.reg_style33}>SUBMIT</Text>
              </Button>
            </View>
            <View 
            style={{height:34}}
            />
            {/* <View style={styles.reg_style34}>
              <Text style={styles.reg_style35} onPress={this.login}>
                Already have an account?{" "}
                <Text style={styles.reg_style36}>LOGIN HERE</Text>
              </Text>
            </View> */}
          </View>
        </ScrollView>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    isLoding: state.register.isLoding,
    error: state.register.error,
    data: state.register.data,
    message: state.register.message,
    status: state.register.status,
  };
}

const mapDispatchToProps = (dispatch) => ({
  serviceActionPending: () => dispatch(serviceActionPending()),
  serviceActionError: (error) => dispatch(serviceActionError(error)),
  serviceActionSuccess: (data) => dispatch(serviceActionSuccess(data)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AddressEnter);

const styles = StyleSheet.create({
  reg_style1: { alignItems: "flex-start", margin: 10 },
  reg_style2: { width: 100, justifyContent: "center" },
  reg_style3: { color: colors.theme_fg_two, fontSize: 30 },
  reg_style4: { margin: 5 },
  reg_style5: {
    fontSize: 25,
    color: colors.theme_fg_two,
    fontFamily: font_title,
  },
  reg_style6: { justifyContent: "center", alignItems: "center" },
  reg_style7: { marginTop: "10%" },
  reg_style8: { height: 120, width: 120 },
  reg_style9: { flex: 1, width: undefined, height: undefined },
  reg_style10: { marginTop: "10%" },
  reg_style11: { width: "80%", alignSelf: "center" },
  reg_style12: { fontSize: 14, fontFamily: font_description },
  reg_style13: { fontFamily: font_title },
  reg_style14: { color: colors.theme_bg },
  reg_style15: { width: "80%", alignSelf: "center" },
  reg_style16: { fontSize: 14, fontFamily: font_description },
  reg_style17: { fontFamily: font_title },
  reg_style18: { color: colors.theme_bg },
  reg_style19: { width: "80%", alignSelf: "center" },
  reg_style20: { fontSize: 14, fontFamily: font_description },
  reg_style21: { fontFamily: font_title },
  reg_style22: { color: colors.theme_bg },
  reg_style23: { width: "80%", alignSelf: "center" },
  reg_style24: { fontSize: 14, fontFamily: font_description },
  reg_style25: { fontFamily: font_title },
  reg_style26: { color: colors.theme_bg },
  reg_style27: { width: "80%", alignSelf: "center" },
  reg_style28: {
    color: "grey",
    fontWeight: "bold",
    fontSize: 15,
    marginLeft: "3%",
    fontFamily: font_description,
  },
  reg_style29: { height: 50, width: "100%" },
  reg_style30: { marginTop: "5%" },
  reg_style31: { width: "80%", alignSelf: "center" },
  reg_style32: {
    backgroundColor: colors.theme_bg,
    borderRadius: 5,
    height: 40,
  },
  reg_style33: {
    color: colors.theme_fg_three,
    fontFamily: font_title,
    letterSpacing: 0.5,
  },
  reg_style34: {
    marginTop: "5%",
    justifyContent: "flex-end",
    alignItems: "center",
    position: "relative",
    bottom: 0,
  },
  reg_style35: {
    fontSize: 15,
    color: colors.theme_bg_two,
    marginTop: "8%",
    fontFamily: font_description,
    marginBottom: 20,
  },
  reg_style36: { color: colors.theme_fg },

  container: { flex: 1, flexDirection: "column" },
  header: {
    justifyContent: "flex-start",
    height: "10%",
    backgroundColor: colors.theme_bg,
    borderBottomLeftRadius: 45,
    borderBottomRightRadius: 45,
    shadowOffset: { width: 0, height: 15 },
    shadowColor: colors.theme_bg,
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 10,
  },
  header_card: {
    alignItems: "center",
    borderRadius: 15,
    justifyContent: "center",
  },
  header_card_item: {
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    borderBottomLeftRadius: 15,
    borderBottomRightRadius: 15,
    shadowOffset: { width: 0, height: 15 },
    shadowColor: colors.theme_bg,
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 10,
  },
  text_field: {
    height: 40,
    borderBottomColor: colors.theme_bg,
    borderBottomWidth: 1.5,
    padding: 5,
  },
  forgot_password_container: {
    width: "95%",
    alignItems: "flex-end",
  },
  forgot_text: {
    fontSize: 15,
    color: colors.theme_fg_four,
  },

  forgot_password_container: {
    width: "80%",
    alignItems: "flex-end",
  },
  forgot_text: {
    fontSize: 15,
    color: colors.theme_fg_four,
  },
  back_icon: {
    color: colors.theme_bg_three,
    marginLeft: 15,
  },
});