import React from "react";
import { View } from "react-native";
import isNil from "lodash/isNil";
import type { ThumbnailListProps } from "./types";
import { RowCount } from "./types";
import { useStyles } from "./ThumbnailList.style";
import type { File } from "../FormatFile";
import { FormatFile } from "../FormatFile";

function isImage(file: File) {
  return !!file.contentType && file.contentType.includes("image/");
}

function hasValidUrl(file: File) {
  return !isNil(file.url);
}

export const filterImages = (files: File[]): File[] => {
  return files.filter((file: File) => {
    return isImage(file) && hasValidUrl(file);
  });
};

export function ThumbnailList({
  files,
  rowCount = RowCount.TwoRows,
  handleOpenFile,
  createThumbnail,
}: ThumbnailListProps) {
  const imageList = filterImages(files);
  const styles = useStyles();

  return (
    <View
      style={[
        styles.list,
        rowCount === RowCount.ThreeRows && styles.maxDimensionsForThreeRows,
      ]}
    >
      {files.map((file, index) => {
        return (
          <FormatFile
            file={file}
            accessibilityLabel={file.fileName}
            key={`${file.fileName}-${index}`}
            styleInGrid
            onTap={openFile(file, index)}
            createThumbnail={createThumbnail}
          />
        );
      })}
    </View>
  );

  function openFile(file: File, index: number) {
    return () => {
      handleOpenFile?.({ file, index, imageList });
    };
  }
}