import React, { useState, useEffect } from "react";
import {
  StyleSheet,
  Button,
  TextInput,
  View,
  Text,
  TouchableOpacity,
  ImageBackground,
  Alert, 
} from "react-native";
import { FontAwesome } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";
import { SignIn } from "./SignIn";

import axios from "axios";
import { BottomTab } from "../Navigations/BottomTab";

export function PriceScreen({ navigation, data }) {
  const [details, setDetails] = useState({
    name: "",
    district: "",
    isValidUser: true,
    isValidearns: true,
    isValiddistrict: true,
    check_textinputChange: false,
  });

  const textInputChange = (val) => {
    if (val.trim().length >= 4) {
      setDetails({
        ...details,
        name: val,
        check_textInputChange: true,
        isValidUser: true,
      });
    } else {
      setDetails({
        ...details,
        name: val,
        check_textInputChange: false,
        isValidUser: false,
      });
    }
  };
  // const handleEarnsChanged = (val) => {
  //   if (val.trim().length <= 7) {
  //     setDetails({
  //       ...details,
  //       earns: val,
  //       isValidearns: true,
  //     });
  //   } else {
  //     setDetails({
  //       ...details,
  //       earns: val,
  //       isValidearns: false,
  //     });
  //   }
  // };
  const handleDistrictChanged = (val) => {
    if (val.trim().length >= 4) {
      setDetails({
        ...details,
        district: val,
        isValiddistrict: true,
      });
    } else {
      setDetails({
        ...details,
        district: val,
        isValiddistrict: false,
      });
    }
  };

  const createTwoButtonAlert = () =>{
    Alert.alert(
      "Delete User",
      "Are you sure want to delete User",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => axios.delete("http://192.168.8.126:5000/deleteUsers/<id>")
        .then(function (response) {
          const stngobj = JSON.stringify(response.data)
          console.log(stngobj);
          alert("Successfully deleted")
          navigation.navigate("SignIn")
          // return response;
        })
        .catch(function (error) {
          console.log(error);
          alert("Please Insert new Data")
        }) }
      ]
    );
    }

    function dbDetails(){
      
    }

    const form = new FormData ();

  form.append("name", details.name)
  form.append("district", details.district)

  console.log(form)

  return (
    <View style={styles.container}>
      <ImageBackground
        source={require("../assets/signin1.jpg")}
        style={styles.images}
      >
        <View style={styles.editUSer}>
          <TouchableOpacity>
            <FontAwesome5 name="user-edit" size={30} color="black" />
          </TouchableOpacity>
        </View>
        <View style={styles.secondContainer}>
          <View style={styles.SectionStyle}>
            {/* <Text style={styles.text}>
                            HELLO
                        </Text>
                        <Text style={styles.text1}>
                            Sign In to your Account
                        </Text> */}

            <Text
              style={{ alignSelf: "center", marginBottom: 10, fontSize: 20 }}
            >
              {" "}
              User Profile{" "}
            </Text>

            <View style={{ alignSelf: "center", marginBottom: 30 }}>
              <Ionicons name="person" size={50} color="black" />
            </View>

            <View style={styles.textinputicon}>
              <Entypo name="user" size={30} color="white" />
              <TextInput
                style={styles.input1}
                onChangeText={(val) => textInputChange(val)}
                placeholder="Enter Name" //dummy@abc.com
                placeholderTextColor="#8b9cb5"
                // keyboardType="email-address"
                // onSubmitEditing={() =>
                //     passwordInputRef.current &&
                //     passwordInputRef.current.focus()
                // }
                blurOnSubmit={false}
              />
            </View>
            {details.isValidUser ? null : (
              <Text style={styles.errorMsg}>
                Name must be 4 characters long
              </Text>
            )}
          </View>

          {/* <View style={styles.SectionStyle}>
            <View style={styles.textinputicon}>
              <FontAwesome name="money" size={30} color="white" />
              <TextInput
                style={styles.input1}
                onChangeText={(val) => handleEarnsChanged(val)}
                placeholder="Enter Earns" //12345
                placeholderTextColor="#8b9cb5"
                // ref={passwordInputRef}
                // onSubmitEditing={Keyboard.dismiss}
                blurOnSubmit={false}
                secureTextEntry={true}
              />
            </View>
            {details.isValidearns ? null : (
              <Text style={styles.errorMsg}>
                Email must be 4 characters long
              </Text>
            )}
          </View> */}
          <View style={styles.SectionStyle}>
            <View style={styles.textinputicon}>
              <Entypo name="location-pin" size={30} color="white" />
              <TextInput
                style={styles.input1}
                onChangeText={(val) => handleDistrictChanged(val)}
                placeholder="Enter District" //12345
                placeholderTextColor="#8b9cb5"
                // ref={passwordInputRef}
                // onSubmitEditing={Keyboard.dismiss}
                blurOnSubmit={false}
                secureTextEntry={false}
              />
            </View>
            {details.isValiddistrict ? null : (
              <Text style={styles.errorMsg}>
                Distict must be 4 characters long
              </Text>
            )}
          </View>
          <View style={styles.buttons}>
            <View style={styles.saveBtn}>
              <TouchableOpacity
                style={styles.buttonSub}
                activeOpacity={0.5}
                onPress={() => axios.put("http://192.168.8.126:5000/updateUsers/<id>", form)
                .then(function (response) {
                  const stngobj = JSON.stringify(response.data)
                  console.log(stngobj);
                  alert("Successfully Update")
                  // navigation.navigate("HomeScreen")
                  // return response;
                })
                .catch(function (error) {
                  console.log(error);
                  alert("update error")
                }) }
              >
                <Text style={styles.buttonTextStyle}>Save Details</Text>
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.delbtn}
                activeOpacity={0.5}
                onPress={() => createTwoButtonAlert()}
              >
                <Text style={styles.buttonTextStyle}>Delete user</Text>
              </TouchableOpacity>
            </View>
            <View>
              <Text style={styles.text1}>You have earned 5% Discount</Text>
            </View>
          </View>
        </View>
        <View style={styles.bottom}>
      <BottomTab/>

        </View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderColor: "#ddd",
    padding: 10,
    paddingTop: 10,
    fontSize: 15,
    borderRadius: 25,
    marginTop: 20,
    marginBottom: 10,
    marginLeft: 19,
    marginRight: 19,
    backgroundColor: "white",
  },
  buttonSub: {
    width: "40%",
    padding: 10,
    marginTop: 30,
    marginLeft: 30,
    // marginHorizontal: 10,
    backgroundColor: "#ff426e",
    flexDirection: "row",
    marginBottom: 20,
    justifyContent: "center",
    borderRadius: 8,
  },
  images: {
    height: "100%",
    justifyContent: "center",
  },

  text: {
    fontSize: 30,
    alignSelf: "center",
    marginTop: 5,
    color: "black",
  },
  text1: {
    fontSize: 20,
    alignSelf: "center",
    marginBottom: 20,
    marginTop: 15,
    color: "black",
  },
  container: {
    justifyContent: "flex-start",
    alignContent: "stretch",
  },
  secondContainer: {
    justifyContent: "flex-start",
    marginTop:65
  },
  textinputicon: {
    // flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    // backgroundColor: '#fff',
    color: "yellow",
  },
  input1: {
    borderWidth: 1,
    borderColor: "#ddd",
    padding: 10,
    // paddingTop: 10,
    fontSize: 15,
    borderRadius: 25,
    marginTop: 20,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 19,
    backgroundColor: "white",
    width: "75%",
  },
  buttonSignUp: {
    width: "20%",
    // padding: 10,
    marginLeft: 10,
    // marginHorizontal: 10,
    backgroundColor: "#ff426e",
    flexDirection: "row",
    // marginBottom: 10,
    justifyContent: "center",
    borderRadius: 8,
  },
  editUSer: {
    alignSelf: "flex-end",
    flexDirection: "row",
  },
  errorMsg: {
    color: "black",
    fontSize: 14,
    alignSelf: "center",
  },
  saveBtn: {
    flexDirection: "row",
  },
  delbtn: {
    width: "40%",
    padding: 10,
    marginTop: 30,
    marginLeft: 25,
    // marginHorizontal: 10,
    backgroundColor: "red",
    flexDirection: "row",
    marginBottom: 20,
    justifyContent: "center",
    borderRadius: 8,
  },
  bottom:{
    justifyContent:"flex-end",
    marginTop:90
  }
});
