lib/hooks/useImageUpload.ts

import { DropzoneOptions, useDropzone } from 'react-dropzone';
// import { toast } from 'react-hot-toast';

const useImageUpload = (
  options?: Partial<DropzoneOptions>,
  onDrop?: (files: File[]) => void,
) => {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: {
      'image/*': ['.jpeg', '.png'],
    },
    multiple: false,
    onDrop: onDrop
      ? onDrop
      : acceptedFiles => {
          // if (acceptedFiles.length > 10) {
          // 	toast('You can only upload 10 images max.', {
          // 		icon: '⚠️',
          // 	});
          // }
          acceptedFiles.forEach(file => {
            try {
              const reader = new FileReader();
              reader.onloadend = () => {
                // const newImage = reader.result as string;
                // setTarget(prev => {
                //   // Check if the image already exists in the state
                //   if (
                //     // prev.length >= 10 ||
                //     prev.find(entity => entity.url === newImage)
                //   ) {
                //     // If it does, return the state unchanged
                //     return prev;
                //   } else {
                //     // If it doesn't, add the new image to the state
                //     return [
                //       ...prev,
                //       {
                //         url: newImage,
                //         selected: false,
                //         name: `i-${prev.length + 1}`,
                //       } satisfies DatasetImageEntity,
                //     ];
                //   }
                // });
              };
              reader.readAsDataURL(file);
            } catch (err) {
              console.error(err);
            }
          });
        },
    ...options,
  });

  return { getRootProps, getInputProps, isDragActive };
};

export default useImageUpload;