import React, { useEffect } from "react";
import {
  View,
  StyleSheet,
  Image,
  TouchableWithoutFeedback,
  Alert,
  Text,
  Modal,
  TouchableOpacity,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
import colors from "../config/colors";
import { useState } from "react/cjs/react.development";

function ImageInput({ imageUri, onChangeImage }) {
  useEffect(() => {
    requestPermission();
    requestPermissionCamera();
  }, []);
  const [modalVisible, setModalVisible] = useState(false);

  const requestPermission = async () => {
    const { granted } = await ImagePicker.requestCameraRollPermissionsAsync();
    if (!granted) alert("Você precisa habilitar permissão para acessar a biblioteca.");
  };
  const requestPermissionCamera = async () => {
    const { granted } = await ImagePicker.requestCameraPermissionsAsync();
    if (!granted) alert("Você precisa habilitar permissão para acessar a câmera.");
  };

  const handlePress = () => {
    if (!imageUri) setModalVisible(true);
    else
      Alert.alert("Deletar", "Deseja deletar esta imagem?", [
        { text: "Sim", onPress: () => onChangeImage(null) },
        { text: "Não" },
      ]);
  };

  const launchImageLibrary = async () => {
    setModalVisible(false);
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        quality: 0.5,
      });
      if (!result.cancelled) onChangeImage(result.uri);
    } catch (error) {
      console.log("Erro ao ler imagem", error);
    }
  };

  const launchCamera = async () => {
    setModalVisible(false);
    try {
      const result = await ImagePicker.launchCameraAsync({
        allowsEditing: false,
      });
      if (!result.cancelled) onChangeImage(result.uri)
    } catch (error) {
      console.log("Erro ao ler imagem", error);
    }
  };


  return (
    <View>
      <TouchableWithoutFeedback onPress={handlePress}>
        <View style={styles.container}>
          {!imageUri && (
            <MaterialCommunityIcons
              color={colors.medium}
              name="camera-plus"
              size={40}
            />
          )}
          {imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
        </View>
      </TouchableWithoutFeedback>

      <View >
        <Modal style={styles.centeredView}
          animationType="slide"
          transparent={true}
          visible={modalVisible}>
          <TouchableWithoutFeedback onPress={() => {
            setModalVisible(!setModalVisible);
          }}>
            <View style={styles.centeredView}>
              <View style={styles.modalView}>
                <View>
                  <Text style={styles.modalLabel}>Selecione uma imagem</Text>
                  <TouchableOpacity style={{ width: 300 }} onPress={launchCamera}>
                    <Text style={styles.modalText}>Câmera</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={{ width: 300 }} onPress={launchImageLibrary}>
                    <Text style={styles.modalText}>Galeria</Text>
                  </TouchableOpacity>
                </View>
                <TouchableOpacity style={{ width: 300 }} onPress={() => { setModalVisible(false) }}>
                  <Text style={{ fontWeight: 'bold', marginTop: 20, fontSize: 14, textAlign: 'center' }}>
                    Cancelar
                </Text>
                </TouchableOpacity>
              </View>
            </View>
          </TouchableWithoutFeedback>
        </Modal>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    backgroundColor: colors.light,
    borderRadius: 15,
    height: 100,
    justifyContent: "center",
    marginVertical: 10,
    overflow: "hidden",
    width: 100,
  },
  image: {
    height: "100%",
    width: "100%",
  },
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    margin: 20,
    backgroundColor: '#d3d3d3',
    borderRadius: 20,
    padding: 30,
    alignItems: 'center',
    shadowColor: 'grey',
    shadowOffset: {
      width: 10,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 25,
    width: 300,
  },
  modalText: {
    marginTop: 15,
    textAlign: 'center',
    fontSize: 16,
    color: colors.primary,
  },
  modalLabel: {
    borderBottomWidth: 2,
    borderBottomColor: colors.primary,
    width: 300,
    color: colors.primary,
    fontSize: 18,
    textAlign: "center",
    fontWeight: "bold",
    height: 35
  },
});

export default ImageInput;