import * as FileSystem from "expo-file-system";
import {
  Button,
  Container,
  Content,
  Spinner,
  Text as NBText,
  Thumbnail,
  View,
} from "native-base";
import React, { useEffect, useState } from "react";
import { FlatList, 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,
  selectUploadInProgress,
} from "../../redux/photos/photos.selectors";
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";

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

export function ScreenMediaCache({
  photos,
  removeAllPhotos,
  uploadAllphotos,
  uploadInProgress,
}) {
  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]);
  console.log("upinprog", uploadInProgress);
  return (
    <Container>
      <Content>
        <View style={styles.actions}>
          <Button onPress={() => removeAllPhotos()}>
            <NBText>Delete all</NBText>
          </Button>
          <Button onPress={() => uploadAllphotos()}>
            <NBText>Upload all </NBText>
            {uploadInProgress && <Spinner />}
          </Button>
        </View>
        <Text>{`${photos.length} Photos`}</Text>
        <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>
            )
          }
        />
        <MediaCacheOverlay
          imgIndex={imgIndex}
          setImgIndex={setImgIndex}
          previewVisible={previewVisible}
          setPreviewVisible={setPreviewVisible}
        />
      </Content>
    </Container>
  );
}

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);

// <FlatList
//   data={imagesInDir}
//   style={{}}
//   keyExtractor={(item) => item.id}
//   renderItem={(object) => <Text>{object.item}</Text>}
// />;