import _ from "lodash";
import { Button, Spinner, Text as NBText, View } from "native-base";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
  FlatList,
  Image,
  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,
  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 { t } = useTranslation();
  const [previewVisible, setPreviewVisible] = useState(false);
  const [imgIndex, setImgIndex] = useState(0);

  const groupedPhotos = _.groupBy(photos, "jobId");

  const RenderJobPictures = ({ jobId, jobPhotos }) => (
    <View>
      <Text>{jobId}</Text>
      <FlatList
        data={jobPhotos}
        style={{ flex: 1 }}
        contentContainerStyle={styles.listContentContainer}
        keyExtractor={(item) => item.id}
        numColumns={4}
        renderItem={(object) =>
          object.item.video ? (
            <Text>Video</Text>
          ) : (
            <TouchableOpacity
              style={{
                flex: 1 / 4, //here you can use flex:1 also
                aspectRatio: 1,
              }}
              onPress={() => {
                setImgIndex(object.index);
                setPreviewVisible(true);
              }}
            >
              <Image
                source={{ uri: object.item.uri }}
                style={{ flex: 1 }}
                resizeMode="cover"
              />
            </TouchableOpacity>
          )
        }
      />
    </View>
  );

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.actions}>
        <Button onPress={() => removeAllPhotos()}>
          <NBText>{t("mediacache.actions.deleteall")}</NBText>
        </Button>
        <Button onPress={() => uploadAllphotos()}>
          <NBText>{t("mediacache.actions.uploadall")}</NBText>
          {uploadInProgress && <Spinner />}
        </Button>
      </View>
      <FlatList
        data={groupedPhotos ? Object.keys(groupedPhotos) : []}
        style={{ flex: 1 }}
        contentContainerStyle={styles.listContentContainer}
        keyExtractor={(item) => item}
        renderItem={(object) => (
          <RenderJobPictures
            jobPhotos={groupedPhotos[object.item]}
            jobId={object.item}
          />
        )}
      />
      <MediaCacheOverlay
        imgIndex={imgIndex}
        setImgIndex={setImgIndex}
        previewVisible={previewVisible}
        setPreviewVisible={setPreviewVisible}
      />
      <Text>{`${photos.length} Photos`}</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  actions: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-evenly",
  },
  listContentContainer: {
    //flex: 1,
    justifyContent: "flex-start",
    //flexDirection: "row",
  },
});

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

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