client/components/addFile.tsx

import React, { useState } from "react";
import { Modal, View, Text, Pressable, Platform } from "react-native";
import { useLanguage } from "@/contexts/LanguageContext";
import * as DocumentPicker from "expo-document-picker";

type SelectedFile = DocumentPicker.DocumentPickerAsset & { 
  state ?: "Uploading" | "Uploaded" | "Error Uploading";};

type Props = {
  visible: boolean;
  onClose: () => void;
  onPickFile: (file?: any) => void;
  onRemoveFile: (index: number) => void;
  selectedFiles: SelectedFile[];
  styles: any;
};

const AddFile = ({
  visible,
  onClose,
  onPickFile,
  onRemoveFile,
  selectedFiles,
  styles,
}: Props) => {
  const { t } = useLanguage();
    const [ isDragging, setIsDragging ] = useState(false);
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.feedbackOverlay}>
        <View style={styles.feedbackBox}>

          <Text style={styles.feedbackTitle}>
            {t.btn_add_file}
          </Text>
          <Text style={styles.addFileText}>
            {t.file_format}{'\n'}{t.file_size_limit}
          </Text>

          {/* <Text style={[styles.feedbackInput, styles.addFileText]}>
            {selectedFileName} || {t.no_files}
          </Text> */}

            {/*  List of added files (or that there's no files uploaded yet) */}
          <View style={styles.feedbackInput}>
            {selectedFiles.length === 0 ? (
                <Text style={styles.addFileText}>
                {t.no_files}
                </Text>
            ) : (
                selectedFiles.map((file, index) => (
                <View
                    key={`${file.name}-${index}`}
                    style={[styles.addFileText, styles.fileRow]}
                >
                    <Text 
                      style={styles.fileName}
                      numberOfLines={1}>
                        {file.name}
                    </Text>

                    {file.state === "Uploading" && (<Text style={styles.addFileText}>{t.file_uploading}</Text>)}
                    {file.state === "Uploaded" && (<Text style={styles.addFileText}>{t.file_uploaded}</Text>)}
                    {file.state === "Error Uploading" && (<Text style={styles.addFileText}>{t.file_upload_failed_unknown_error}</Text>)}

                    <Pressable
                    onPress={() => onRemoveFile(index)}
                    hitSlop={8}
                    style={styles.removeFileBut}
                    >
                        <Text style={styles.removeFileText}>✕</Text>
                    </Pressable>
                </View>
                ))
            )}
            </View>

          {/* Upload area. click to add or drag and drop if on desktop web */}
          <View>
            {Platform.OS === "web" ? (
            <div
            onClick={() => onPickFile()}
            onDragOver={(e) => {
                e.preventDefault();
                setIsDragging(true);
            }}
            onDragLeave={() => {
                setIsDragging(false);
            }}
            onDrop={(e) => {
                e.preventDefault();
                setIsDragging(false);

                const files = e.dataTransfer.files;
                if (!files || files.length === 0) return;

                const file = files[0];

                onPickFile(file);
            }}
            style={{
                width: "100%",
                minHeight: 150,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                borderStyle: "dashed",
                borderWidth: 1,
                borderColor: "#999",
                borderRadius: 10,
                cursor: "pointer",
            }}
            >
            <Text style={styles.addFileText}>
                {isDragging ? (
                <Text style={styles.addFileText}>{t.file_add_drop}</Text>
                ) : (
                <Text style={styles.addFileText}>
                    {t.file_add_instructions_prefix}
                    <Text style={styles.click}>{t.click}</Text>
                    {t.file_add_instructions_suffix}
                </Text>
                )}
            </Text>
            </div>
        ) : (
            <Pressable
            onPress={() => onPickFile()}
            style={({ hovered, pressed }) => [
                styles.feedbackInput,
                hovered && { opacity: 0.9 },
                pressed && { opacity: 0.7 },
            ]}
            >
            
            </Pressable>
        )}
        </View>

          {/* Buttons */}
          <View style={styles.feedbackButtons}>
            <Pressable
              onPress={onClose}
              style={({ hovered, pressed }) => [
                styles.feedbackCancel,
                hovered && { opacity: 0.9 },
                pressed && { opacity: 0.7 },
              ]}
            >
              <Text style={styles.addFileBut}>{t.comment_cancel}</Text>
            </Pressable>

            <Pressable
              onPress={() => {
                onClose();
              }}
              style={({ hovered, pressed }) => [
                styles.feedbackSubmit,
                hovered && { opacity: 0.9 },
                pressed && { opacity: 0.7 },
              ]}
            >
              <Text style={styles.addFileBut}>{t.comment_submit}</Text>
            </Pressable>
          </View>

        </View>
      </View>
    </Modal>
  );
};

export default AddFile;