import * as FileSystem from "expo-file-system";
import { Button, Text as NBText, Thumbnail, View } from "native-base";
import React, { useEffect, useState } from "react";
import {
  FlatList,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
} from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  removeAllPhotos,
  uploadAllPhotos,
} from "../../redux/photos/photos.actions";
import { selectPhotos } from "../../redux/photos/photos.selectors";
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";

const mapStateToProps = createStructuredSelector({
  photos: selectPhotos,
});
const mapDispatchToProps = (dispatch) => ({
  removeAllPhotos: () => dispatch(removeAllPhotos()),
  uploadAllphotos: () => dispatch(uploadAllPhotos()),
});

export function ScreenMediaCache({ photos, removeAllPhotos, uploadAllphotos }) {
  const [previewVisible, setPreviewVisible] = useState(false);
  const [imgIndex, setImgIndex] = useState(0);
  const [imagesInDir, setImagesInDir] = useState([]);

  useEffect(() => {
    const check = async () => {
      setImagesInDir(
        await FileSystem.readDirectoryAsync(
          FileSystem.documentDirectory + "photos"
        )
      );
    };
    photos.length;
    check();
  }, [photos]);

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={photos}
        style={{ flex: 5 }}
        contentContainerStyle={styles.listContentContainer}
        keyExtractor={(item) => item.id}
        numColumns={5}
        renderItem={(object) =>
          object.item.video ? (
            <Text>Video</Text>
          ) : (
            <TouchableOpacity
              onPress={() => {
                setImgIndex(object.index);
                setPreviewVisible(true);
              }}
            >
              <Thumbnail square large source={{ uri: object.item.uri }} />
            </TouchableOpacity>
          )
        }
      />
      <FlatList
        data={imagesInDir}
        style={{ flex: 1, backgroundColor: "tomato" }}
        keyExtractor={(item) => item.id}
        renderItem={(object) => <Text>{object.item}</Text>}
      />
      <Text>{`${photos.length} Photos`}</Text>
      <View style={styles.actions}>
        <Button onPress={() => removeAllPhotos()}>
          <NBText>Delete all</NBText>
        </Button>
        <Button onPress={() => uploadAllphotos()}>
          <NBText>Upload all</NBText>
        </Button>
      </View>
      <MediaCacheOverlay
        imgIndex={imgIndex}
        setImgIndex={setImgIndex}
        previewVisible={previewVisible}
        setPreviewVisible={setPreviewVisible}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  actions: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-evenly",
  },
  listContentContainer: {
    flex: 1,
  },
  thumbnail: {
    width: 10,
    height: 10,
    backgroundColor: "tomato",
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(ScreenMediaCache);