import { Container, Content, Thumbnail } from "native-base";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
  FlatList,
  SafeAreaView,
  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 { t } = useTranslation();
  const [previewVisible, setPreviewVisible] = useState(false);
  const [imgIndex, setImgIndex] = useState(0);

  return (
    <Container>
      <Content padder>
        <FlatList
          data={job.documents}
          style={{ flex: 1 }}
          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}
        />
      </Content>
    </Container>
  );
}

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