import React, { useMemo, useState } from "react";
import {
  FlatList,
  Image,
  RefreshControl,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import env from "../../env";
import { DetermineFileType } from "../../util/document-upload.utility";
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";

export default function JobDocumentsComponent({ job, loading, refetch }) {
  const [previewVisible, setPreviewVisible] = useState(false);
  const [imgIndex, setImgIndex] = useState(0);
  const onRefresh = async () => {
    return refetch();
  };

  const fullphotos = useMemo(
    () =>
      job.documents.map((doc) => {
        return {
          source: {
            uri: GenerateSrcUrl(doc),
          },
        };
      }),
    [job.documents]
  );

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
        }
        data={job.documents}
        numColumns={4}
        style={{ flex: 1 }}
        keyExtractor={(item) => item.id}
        renderItem={(object) => (
          <View
            style={{
              flex: 1,
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              margin: 5,
            }}
          >
            <TouchableOpacity
              onPress={() => {
                setImgIndex(object.index);
                setPreviewVisible(true);
              }}
            >
              <Image
                source={{
                  width: 100,
                  height: 100,
                  uri: GenerateThumbUrl(object.item),
                }}
              />
            </TouchableOpacity>
          </View>
        )}
      />
      <Text>{job.documents.length}</Text>
      <MediaCacheOverlay
        photos={fullphotos}
        imgIndex={imgIndex}
        setImgIndex={setImgIndex}
        previewVisible={previewVisible}
        setPreviewVisible={setPreviewVisible}
      />
    </View>
  );
}

export const GenerateSrcUrl = (value) => {
  let extension = value.extension;
  if (extension && extension.includes("heic")) extension = "jpg";

  return `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
    value.type
  )}/upload/${value.key}${extension ? `.${extension}` : ""}`;
};

export const GenerateThumbUrl = (value) =>
  `${env.REACT_APP_CLOUDINARY_ENDPOINT}/${DetermineFileType(
    value.type
  )}/upload/${env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`;