import Grid from '@mui/material/Grid';
import UploadPreview from '@rpldy/upload-preview';
import { useItemFinishListener } from '@rpldy/uploady';
import React, { useState } from 'react';
import ImageViewer from 'react-simple-image-viewer';
import { STXImage, STXImageGallery } from '../types';
import PhotoUploadImage from './PhotoUploadImage';
import PhotoUploadQueue from './PhotoUploadQueue';
import { DEFAULT_FALLBACK_URL } from './types';

const _noop = () => null;

const PhotoUploadGallery = ({
  gallery,
  imageViewerProps,
  ...galleryProps
}: {
  gallery: STXImageGallery;
  imageViewerProps: any;
  galleryProps: any;
}) => {
  const {
    images = [],
    previewHeight = 72,
    previewPadding = 8,
    rows = 0,
    tag = '',
    tagFilter = [],
    enableDelete = false,
    //enableMove = true,
    //enableDrop = true,
    onAddImage = _noop,
    onDeleteImage = _noop,
    onErrorImage = _noop,
    //onUpdateImage = _noop
  } = gallery;

  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [isViewerOpen, setIsViewerOpen] = useState(false);
  const [deletedImageIdList, setDeletedImageIdList] = useState<string[]>([]);

  // filter and sort items
  const filteredImages = images.filter(
    (image) => tagFilter.length === 0 || tagFilter.includes(image.tag)
  );
  filteredImages.sort((a, b) => (a.sort > b.sort ? 1 : -1)); // sort by sort property
  const filteredImageViewUrls = filteredImages.map((image) => image.storageUrl);

  const handleDeleteImage = (image: STXImage) => () => {
    onDeleteImage(image);
    if (image.imageId) {
      setDeletedImageIdList([...deletedImageIdList, image.imageId]);
    }
  };

  const handleErrorImage = (imageId: string) => {
    onErrorImage(imageId);
    console.log(`image ${imageId} has an error in photo gallery`);
  };

  useItemFinishListener((item) => {
    onAddImage(item, tag);
  });

  const openImageViewer = (index: number) => {
    setCurrentImageIndex(index);
    setIsViewerOpen(true);
  };

  const closeImageViewer = () => {
    setCurrentImageIndex(0);
    setIsViewerOpen(false);
  };

  const allowView = (image: any) => image.type.startsWith('image/');

  const handleClick = (image: any, i: number) => () => {
    allowView(image) && openImageViewer(i);
  };

  const height =
    rows > 0 ? rows * (previewHeight + 2 * previewPadding) + 16 : undefined;
  const overflowY = rows > 0 ? 'auto' : 'hidden';

  const imageIdList = filteredImages.map((image: STXImage) => image.imageId);

  const previewComponentProps = {
    previewHeight,
    previewPadding,
    imageIdList,
    deletedImageIdList,
    handleErrorImage,
  };

  return (
    <Grid container sx={{ height, overflowY }} {...galleryProps}>
      {filteredImages.map((image, i) => (
        <Grid item key={i}>
          <PhotoUploadImage
            image={image}
            enableDelete={enableDelete}
            onDeleteImage={handleDeleteImage(image)}
            allowView={allowView(image)}
            onClick={handleClick(image, i)}
          />
        </Grid>
      ))}
      <UploadPreview
        rememberPreviousBatches={true}
        PreviewComponent={PhotoUploadQueue}
        previewComponentProps={previewComponentProps}
        fallbackUrl={DEFAULT_FALLBACK_URL}
      />
      {isViewerOpen && (
        <ImageViewer
          src={filteredImageViewUrls}
          currentIndex={currentImageIndex}
          disableScroll={false}
          closeOnClickOutside={true}
          onClose={closeImageViewer}
          {...imageViewerProps}
        />
      )}
    </Grid>
  );
};

export default PhotoUploadGallery;