import { Thumbnail } from "native-base";
import React, { useState } from "react";
import {
  FlatList,
  RefreshControl,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";

const REACT_APP_CLOUDINARY_IMAGE_ENDPOINT =
  "https://res.cloudinary.com/bodyshop/image/upload";
const REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS = "c_fill,f_auto,h_250,w_250";

export default function JobDocumentsComponent({ job, loading, refetch }) {
  const [previewVisible, setPreviewVisible] = useState(false);
  const [imgIndex, setImgIndex] = useState(0);
  const onRefresh = async () => {
    return refetch();
  };
  return (
    <View>
      <FlatList
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
        }
        data={job.documents}
        contentContainerStyle={styles.listContentContainer}
        keyExtractor={(item) => item.id}
        numColumns={4}
        renderItem={(object) => (
          <TouchableOpacity
            onPress={() => {
              // setImgIndex(object.index);
              // setPreviewVisible(true);
            }}
          >
            <Thumbnail
              square
              large
              style={{ margin: 5 }}
              source={{
                uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`,
              }}
            />
          </TouchableOpacity>
        )}
      />
      <Text>{job.documents.length}</Text>
      <MediaCacheOverlay
        imgIndex={imgIndex}
        setImgIndex={setImgIndex}
        previewVisible={previewVisible}
        setPreviewVisible={setPreviewVisible}
      />
    </View>
  );
}

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",
  },
});
