components/chat/ImageList.tsx

import React, { useCallback } from 'react';
import useImageUpload from '../../lib/hooks/useImageUpload';
import { useAtom, useAtomValue } from 'jotai';
import { datasetAtom } from '../../state';
import Image from 'next/image';
import { produce } from 'immer';

export interface ImageListProps {}

const ImageList: React.FC<ImageListProps> = () => {
  const { getRootProps, getInputProps, isDragActive } = useImageUpload({
    noClick: true,
  });

  const [dataset, setDataset] = useAtom(datasetAtom);
  return (
    <div className="relative size-full px-12 max-w-3xl mx-auto">
      {/* {dataset.length < 10 ? (
				<div className="col-span-full px-8 py-4 rounded-xl bg-blue-100 text-blue-400 mb-8">
					You can upload up to 10 images max by dragging image.
				</div>
			) : (
				<div className="col-span-full px-8 py-4 rounded-xl bg-red-100 text-red-400 mb-8">
					You have reached the maximum limit of 10 images.
				</div>
			)} */}
      <div
        {...getRootProps()}
        className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4"
      >
        {dataset.map(entity => {
          const { url: imageSrc, name, selected } = entity;
          return (
            <div
              key={name}
              onClick={() =>
                setDataset(prev =>
                  produce(prev, draft => {
                    const index = draft.findIndex(d => d.name === name);
                    draft[index].selected = !selected;
                  }),
                )
              }
              className={`relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content ${selected ? 'border-4 border-blue-500' : ''}`}
            >
              <Image
                src={imageSrc}
                draggable={false}
                alt="dataset images"
                width={500}
                height={500}
                objectFit="cover"
                className="rounded-xl"
              />
              <div className="absolute bottom-0 left-0 bg-gray-800/50 text-white px-3 py-1 rounded-tr-lg">
                <p className="text-xs font-bold">{name}</p>
              </div>
            </div>
          );
        })}
      </div>

      {isDragActive && (
        <div
          {...getRootProps()}
          className="dropzone border-2 border-dashed border-gray-400 size-full absolute top-0 left-0 flex items-center justify-center rounded-lg cursor-pointer bg-gray-500/50"
        >
          <input {...getInputProps()} />
          <p className="text-white">Drop the files here ...</p>
        </div>
      )}
    </div>
  );
};

export default ImageList;