import * as FileSystem from "expo-file-system";
import React, { useEffect, useState } from "react";
import { SafeAreaView, Text } from "react-native";
import { Button, Text as NBText } from "native-base";
export default function ScreenMediaCache() {
  const [images, setImages] = useState([]);
  useEffect(() => {
    (async () => {
      setImages(
        (
          await FileSystem.readDirectoryAsync(
            FileSystem.documentDirectory + "photos"
          )
        ).map((f) => {
          return {
            uri: FileSystem.documentDirectory + "photos/" + f,
            dimensions: { width: 2142, height: 4224 },
          };
        })
      );
    })();
  }, []);

  return (
    <SafeAreaView style={{ display: "flex", flex: 1 }}>
      <Text>This is the media cache screen.</Text>
      <Button
        block
        onPress={async () => {
          const fps = (
            await FileSystem.readDirectoryAsync(
              FileSystem.documentDirectory + "photos"
            )
          ).map((f) => {
            return FileSystem.documentDirectory + "photos/" + f;
          });
          const all = [];
          fps.forEach((f) => all.push(FileSystem.deleteAsync(f)));
          await Promise.all(all);
          console.log("All photos deleted.");
        }}
      >
        <NBText>Delete all</NBText>
      </Button>
    </SafeAreaView>
  );
}