cally/components/pages/calendar/UploadImageDialog.tsx

import {
  View,
  Text,
  TouchableOpacity,
  Image,
  Button,
  ButtonSize,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { Dialog, PanningProvider, Card } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather, MaterialIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
import AddImageIcon from "@/assets/svgs/AddImageIcon";
import CameraIcon from "@/assets/svgs/CameraIcon";

interface IUploadDialogProps {
  show: boolean;
  setShow: (value: boolean) => void;
}

const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  const [imageTitle, setImageTitle] = useState<string | null>(null);

  const handleImagePick = async () => {
    const permissionResult =
      await ImagePicker.requestMediaLibraryPermissionsAsync();

    if (permissionResult.granted === false) {
      alert("Permission to access camera roll is required!");
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    // Check if the user canceled the image picker
    if (!result.canceled) {
      setSelectedImage(result.assets[0].uri);
      setImageTitle(result.assets[0].fileName || "Untitled");
    }
  };

  return (
    <Dialog
      visible={uploadDialogProps.show}
      onDismiss={() => uploadDialogProps.setShow(false)}
      panDirection={PanningProvider.Directions.DOWN}
      center
    >
      <Card style={styles.modalCard}>
        <View centerH>
          <Text style={styles.modalTitle}>Upload an Image</Text>
          {!selectedImage && (
            <TouchableOpacity onPress={handleImagePick}>
              <View
                style={styles.uploadImgBox}
                centerV
                centerH
                gap-8
                marginB-20
              >
                <AddImageIcon />
                <Text style={styles.uploadTxt}>
                  Click here to upload an image
                </Text>
              </View>
            </TouchableOpacity>
          )}

          {selectedImage && (
            <>
              <View style={styles.imageContainer} row gap-15>
                <Image
                  source={{ uri: selectedImage }}
                  style={styles.selectedImage}
                />
                <View style={styles.imageInfo}>
                  <Text style={styles.imageTitle}>{imageTitle}</Text>
                </View>

                <TouchableOpacity
                  onPress={() => {
                    setSelectedImage(null);
                    setImageTitle("");
                  }}
                >
                  <Feather name="trash" size={22} color="#919191" />
                </TouchableOpacity>
              </View>
              <Button
                style={{
                  marginBottom: 10,
                  marginTop: 35,
                  backgroundColor: "#ea156c",
                  justifyContent: "center",
                  paddingVertical: 15,
                  width: 285,
                  alignItems: "center",
                }}
                label="Upload Image"
                onPress={() => {}}
                labelStyle={styles.btnLbl}
                iconSource={() => (
                  <CameraIcon color="white" style={{marginRight: 10}}/>
                )}
              />
            </>
          )}

          <TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}>
            <Text style={styles.bottomText}>
              Go back
            </Text>
          </TouchableOpacity>
        </View>
      </Card>
    </Dialog>
  );
};

export default UploadImageDialog;

const styles = StyleSheet.create({
  uploadImgBox: {
    backgroundColor: "#ffe8f2",
    padding: 35,
    width: "100%",
    aspectRatio: 1.8,
    borderRadius: 20,
    borderWidth: 2,
    borderColor: "#fd1775",
    borderStyle: "dashed",
  },
  btnLbl: {
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 15,
  },
  uploadTxt: {
    color: "#b11d5a",
    fontSize: 15,
    fontFamily: "PlusJakartaSans_400Regular",
    marginTop: 12
  },
  selectedImage: {
    width: 38.69,
    aspectRatio: 1,
    borderRadius: 5,
  },
  imageContainer: {
    alignItems: "center",
    width: "80%",
    borderWidth: 1,
    borderColor: "#d9d9d9",
    padding: 10,
    borderRadius: 10,
  },
  imageInfo: {
    marginLeft: 10,
  },
  imageTitle: {
    fontSize: 15,
    color: "#262627",
    fontFamily: "PlusJakartaSans_400Regular"
  },
  modalCard: {
    paddingHorizontal: 25,
    paddingTop: 30,
    paddingBottom: 17,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 20,
  },
  modalTitle: {
    fontSize: 22,
    fontFamily: "Manrope_600SemiBold",
    marginBottom: 20,
  },
  bottomText: {
    marginTop: 20,
    color: "#999999",
    fontSize: 13.53,
    fontFamily: "Poppins_500Medium",
  },
});