import { Button, Text as NBText, Thumbnail, View } from "native-base";
import React, { useState } from "react";
import {
  Alert,
  FlatList,
  Modal,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
} from "react-native";
import ImageViewer from "react-native-image-zoom-viewer";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  removeAllPhotos,
  uploadAllPhotos,
} from "../../redux/photos/photos.actions";
import { selectPhotos } from "../../redux/photos/photos.selectors";

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);
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={photos}
        style={{ flex: 1 }}
        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>
          )
        }
      />
      <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>
      <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={{
                backgroundColor: "tomato",
              }}
            >
              <Text>{index} This is the thing.</Text>
            </View>
          )}
          enableSwipeDown
          enablePreload
          imageUrls={photos.map((p) => {
            return { url: p.uri };
          })}
        />
      </Modal>
    </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);