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 {
          videoUrl:
            DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
          source:
            DetermineFileType(doc.type) === "video"
              ? { uri: GenerateThumbUrl(doc) }
              : { 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) => (
          <TouchableOpacity
            style={{ flex: 1 / 4, aspectRatio: 1, margin: 4 }}
            onPress={async () => {
              setImgIndex(object.index);
              setPreviewVisible(true);
            }}
          >
            <Image
              style={{ flex: 1 }}
              resizeMode="cover"
              source={{
                uri: GenerateThumbUrl(object.item),
                aspectRatio: 1,
              }}
            />
          </TouchableOpacity>
        )}
      />
      <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.toLowerCase().includes("heic")) extension = "jpg";

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

export const GenerateThumbUrl = (value) => {
  let extension = value.extension;
  if (extension && extension.includes("heic")) extension = "jpg";
  else if (
    DetermineFileType(value.type) !== "image" ||
    (value.type && value.type.includes("application"))
  )
    extension = "jpg";

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