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;