import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Dimensions,
  Image,
  Button,
  Alert,
  PermissionsAndroid,
} from "react-native";
import { launchImageLibrary, launchCamera } from "react-native-image-picker";

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from "react-native/Libraries/NewAppScreen";

const API_URL = "https://swacitybackend.com/attendance/punchInPhoto";

const uploadImage = async (image) => {
  const r = await fetch(API_URL, {
    method: "POST",
    body: image,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
  return r.json();
  r.text()
    .then((c) => {
      console.log("c", c);
      return r.json();
    })
    .catch((error) => {
      throw new Error(error);
    });
  // console.log("")
};

const Sample = () => {
  const [pickedImage, setPickedImage] = useState(null);
  const handleImageUpload = async () => {
    if (!pickedImage) {
      alert("no image selected ");
      return;
    }
    const formData = new FormData();
    const { uri, type } = pickedImage;
    const platformUri =
      Platform.OS === "android" ? uri : uri.replace("file://", "");

    formData.append("clicked_picture", {
      name: `user_${Math.random() * Math.random()}.png`,
      type: type,
      // type: 'image/png',

      uri: platformUri,
    });

    console.log("form data is ", formData);
    try {
      const response = await uploadImage(formData);
      console.log("upload success!!!!", response);
      Alert.alert("Image uploaded successfully");
    } catch (error) {
      console.log("error in upload image!!!!", error);
      Alert.alert("Error in Image  uploading ");
    }
  };
  const requestCameraPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: "App Camera Permission",
          message: "App needs access to your camera ",
          buttonNeutral: "Ask Me Later",
          buttonNegative: "Cancel",
          buttonPositive: "OK",
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("Camera permission given");
        launchCamera(
          {
            quality: 0.1,
            mediaType: "photo",
            maxHeight: 400,
            maxWidth: 400,
          },
          (response) => {
            console.log("picked image is ", response);
            setPickedImage(response);
          }
        );
      } else {
        console.log("Camera permission denied");
      }
    } catch (err) {
      console.warn(err);
    }
  };

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}
        >
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <Button
              title={"Pick Image"}
              onPress={() => {
                launchImageLibrary(
                  {
                    quality: 0.1,
                  },
                  (response) => {
                    setPickedImage(response);
                  }
                );
              }}
            />
            <Button
              title={"Use Camera "}
              onPress={() => {
                requestCameraPermission();
              }}
            />

            {pickedImage && (
              <View>
                <Image
                  style={styles.image}
                  source={{
                    uri: pickedImage.uri,
                  }}
                />

                <Button
                  title="clear selection"
                  onPress={() => {
                    setPickedImage(null);
                  }}
                />
                <Button
                  color="red"
                  title="upload selection"
                  onPress={handleImageUpload}
                />
              </View>
            )}
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const { width, height } = Dimensions.get("window");
const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  image: {
    width: width * 0.75,
    height: height / 2,
    alignSelf: "center",
  },
  engine: {
    position: "absolute",
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: "600",
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: "400",
    color: Colors.dark,
  },
  highlight: {
    fontWeight: "700",
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: "600",
    padding: 4,
    paddingRight: 12,
    textAlign: "right",
  },
});

export default Sample;