import React, { useEffect, useState } from "react";
import {
  FlatList,
  Image,
  RefreshControl,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
import * as Sentry from "@sentry/react-native";
import Toast from "react-native-toast-message";

import cleanAxios from "../../util/CleanAxios";

export default function JobDocumentsLocalComponent({ bodyshop, job }) {
  const [previewVisible, setPreviewVisible] = useState(false);
  const [images, setImages] = useState([]);
  const [imgIndex, setImgIndex] = useState(0);
  useEffect(() => {
    if (job.id) {
      getPhotos({ bodyshop, jobid: job.id, setImages });
    }
  }, [job.id, bodyshop]);

  const onRefresh = async () => {
    return getPhotos({ bodyshop, jobid: job.id, setImages });
  };

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        refreshControl={
          <RefreshControl refreshing={false} onRefresh={onRefresh} />
        }
        data={images}
        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: object.item.thumbUrl,
                aspectRatio: 1,
              }}
            />
          </TouchableOpacity>
        )}
      />
      <Text>
        {images?.filter((d) => d.type?.mime?.startsWith("image")).length}
      </Text>

      <MediaCacheOverlay
        photos={images}
        imgIndex={imgIndex}
        setImgIndex={setImgIndex}
        previewVisible={previewVisible}
        setPreviewVisible={setPreviewVisible}
      />
    </View>
  );
}

async function getPhotos({ bodyshop, jobid, setImages }) {
  let localmediaserverhttp = bodyshop.localmediaserverhttp.trim();
  if (localmediaserverhttp.endsWith("/")) {
    localmediaserverhttp = localmediaserverhttp.slice(0, -1);
  }

  try {
    const imagesFetch = await cleanAxios.post(
      `${localmediaserverhttp}/jobs/list`,
      {
        jobid,
      },
      { headers: { ims_token: bodyshop.localmediatoken } }
    );

    const normalizedImages = imagesFetch.data
      .filter((d) => d.type?.mime?.startsWith("image"))
      .map((d, idx) => {
        return {
          ...d,
          // src: `${localmediaserverhttp}/${d.src}`,

          uri: `${localmediaserverhttp}${d.src}`,
          thumbUrl: `${localmediaserverhttp}${d.thumbnail}`,
          id: idx,
        };
      });

    setImages(normalizedImages);
  } catch (error) {
    Sentry.captureException(error);
    Toast.show({
      type: "error",
      text1: `Error fetching photos.`,

      text2: JSON.stringify(error),
    });
  }
}