import axios from "axios";
import React, { useEffect, 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";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { splitClient } from "../screen-main/screen-main.component";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobDocumentsComponent);

export function JobDocumentsComponent({ bodyshop, job, loading, refetch }) {
  const [previewVisible, setPreviewVisible] = useState(false);
  const [fullphotos, setFullPhotos] = useState([]);
  const [imgIndex, setImgIndex] = useState(0);

  const useImgproxy = splitClient.getTreatment("Imgproxy");

  const onRefresh = async () => {
    return refetch();
  };

  useEffect(() => {
    async function getPhotos() {
      if (useImgproxy) {
        const result = await axios.post(
          `${env.API_URL}/media/imgproxy/thumbnails`,
          {
            jobid: job.id,
          }
        );

        setFullPhotos(
          result.data.map((doc, idx) => {
            return {
              id: idx,
              videoUrl:
                DetermineFileType(doc.type) === "video" &&
                doc.originalUrlViaProxyPath,
              source:
                DetermineFileType(doc.type) === "video"
                  ? { uri: doc.thumbnailUrl }
                  : { uri: doc.originalUrl },
              url:
                DetermineFileType(doc.type) === "video"
                  ? doc.thumbnailUrl
                  : doc.originalUrl,
              uri:
                DetermineFileType(doc.type) === "video"
                  ? doc.originalUrlViaProxyPath
                  : doc.originalUrl,
              thumbUrl: doc.thumbnailUrl,
            };
          })
        );
      } else {
        setFullPhotos(
          job.documents.map((doc, idx) => {
            return {
              id: idx,
              videoUrl:
                DetermineFileType(doc.type) === "video" && GenerateSrcUrl(doc),
              source:
                DetermineFileType(doc.type) === "video"
                  ? { uri: GenerateThumbUrl(doc) }
                  : { uri: GenerateSrcUrl(doc) },
              url:
                DetermineFileType(doc.type) === "video"
                  ? GenerateThumbUrl(doc)
                  : GenerateSrcUrl(doc),
              uri:
                DetermineFileType(doc.type) === "video"
                  ? GenerateThumbUrl(doc)
                  : GenerateSrcUrl(doc),
              thumbUrl: GenerateThumbUrl(doc),
            };
          })
        );
      }
    }

    getPhotos();
  }, [job.documents]);

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        refreshControl={
          <RefreshControl refreshing={loading} onRefresh={onRefresh} />
        }
        data={fullphotos}
        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
        style={{ textAlign: "center", color: useImgproxy ? "blue" : "black" }}
      >
        {fullphotos.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}` : ""
  }`;
};