import { Button, View } from "native-base";
import React from "react";
import { Alert, Modal, StyleSheet, Text } from "react-native";
import ImageViewer from "react-native-image-zoom-viewer";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { removePhotos } from "../../redux/photos/photos.actions";
import { selectPhotos } from "../../redux/photos/photos.selectors";

const mapStateToProps = createStructuredSelector({
  photos: selectPhotos,
});
const mapDispatchToProps = (dispatch) => ({
  removePhotos: (ids) => dispatch(removePhotos(ids)),
});

export function MediaCacheOverlay({
  photos,
  removePhotos,
  previewVisible,
  setPreviewVisible,
  imgIndex,
  setImgIndex,
}) {
  return (
    <Modal
      animationType="slide"
      onRequestClose={() => {
        Alert.alert("Modal has been closed.");
      }}
      visible={previewVisible}
      transparent={true}
    >
      <ImageViewer
        onCancel={() => setPreviewVisible(false)}
        index={imgIndex}
        onChange={(index) => setImgIndex(index)}
        style={{ display: "flex" }}
        renderFooter={(index) => (
          <View
            style={{
              marginleft: "auto",
              backgroundColor: "tomato",
            }}
          >
            <Text>{index} This is the thing.</Text>
            <Button
              onPress={() => {
                removePhotos([photos[index].id]);
              }}
            >
              <Text>Delete</Text>
            </Button>
          </View>
        )}
        enableSwipeDown
        enablePreload
        imageUrls={photos.map((p) => {
          return { url: p.uri };
        })}
      />
    </Modal>
  );
}

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