import useWindowSize from "@/hooks/useWindowSize";
import { useTranslation } from "react-i18next";
import { TouchableOpacity, View } from "react-native";
import { ThemedText } from "../ThemedText";
import FileItemPhone from "./file-item-phone";
import { FileStatus } from "./file-uploader";

interface MultiFileUploaderProps {
  files: FileStatus[];
  onRemove: (file: File) => void;
  onClearAll: () => void;
  formatFileSize: (bytes: number) => string;
  disabled?: boolean;
}

/**
 * 多文件上传组件 - 用于显示文件列表和管理多个文件
 */
export default function MultiFileUploader({
  files,
  onRemove,
  onClearAll,
  formatFileSize,
  disabled = false
}: MultiFileUploaderProps) {
  const { t } = useTranslation();
  // 获取当前屏幕尺寸
  const { isMobile } = useWindowSize();
  return (
    <View className="space-y-4">
      <View className="flex justify-between items-center">
        <ThemedText className="text-md font-medium">
          {t('fileUploader.uploadedFiles')}
        </ThemedText>
        <View className="p-6 w-full">
          <TouchableOpacity
            className={`w-full bg-white rounded-full p-4 items-center `}
            onPress={onClearAll}
            disabled={disabled}
          >
            <ThemedText className="text-textTertiary text-lg font-semibold">
              {t('fileUploader.clearAll')}
            </ThemedText>
          </TouchableOpacity>
        </View>

      </View>

      <View className="grid grid-cols-3 xl:grid-cols-4 gap-4 sm:max-h-[15rem] overflow-y-auto w-full">
        {files.map((fileStatus, index) => (
          (
            <FileItemPhone
              key={index}
              fileStatus={fileStatus}
              index={index}
              onRemove={onRemove}
              formatFileSize={formatFileSize}
              disabled={disabled}
            />
          )
        ))}
      </View>
    </View>
  );
}