"use client";
import { Avatar, Label } from "flowbite-react";
import { FC, useCallback } from "react";
import { useDropzone } from "react-dropzone";

type props = {
  setImages: Function;
  images: any;
};

const Dropzone: FC<props> = ({ setImages, images }) => {
  const onDrop = useCallback((acceptedFiles: any) => {
    if (acceptedFiles?.length) {
      setImages((previousFile: any) => [
        ...previousFile,
        ...acceptedFiles.map((file: any) =>
          Object.assign(file, { preview: URL.createObjectURL(file) })
        ),
      ]);
    }
    setImages(acceptedFiles);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  return (
    <>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        {isDragActive ? <DropImage /> : <DropImage />}
      </div>
      {/* preview */}
      <Preview images={images} setImages={setImages} />
    </>
  );
};

const DropImage: FC = () => {
  return (
    <div className="flex w-72 items-center justify-center">
      <Label
        htmlFor="dropzone-file"
        className="dark:hover:bg-bray-800 flex h-20 w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:border-gray-500 dark:hover:bg-gray-600"
      >
        <div className="flex  flex-col items-center justify-center">
          <p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
            <span className="font-semibold">Click to upload</span> or drag and
            drop
          </p>
          <p className="text-xs text-gray-500 dark:text-gray-400">
            SVG, PNG, JPG or GIF (MAX. 800x400px)
          </p>
        </div>
      </Label>
    </div>
  );
};
type previewProps = {
  images: any;
  setImages: (x: any) => void;
};
const Preview: FC<previewProps> = ({ images, setImages }) => {
  const removeImage = (image_name: string) => {
    setImages((images: any) =>
      images.filter((image: any) => image.name !== image_name)
    );
  };
  return (
    <>
      <div className="ml-2  flex flex-wrap gap-2">
        {images?.map((image: any, index: number) => (
          <Avatar
            img={image.preview}
            size="lg"
            className="relative"
            key={index}
          >
            <button
              aria-label="Close"
              onClick={() => removeImage(image.name)}
              className="absolute -top-0  right-4 bg-gray-100 text-sm text-gray-900 hover:bg-gray-200 hover:text-red-400 dark:hover:bg-gray-600 dark:hover:text-white"
              type="button"
            >
              <svg
                stroke="currentColor"
                fill="none"
                strokeWidth="2"
                viewBox="0 0 24 24"
                aria-hidden="true"
                className="h-5 w-5"
                height="1em"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                ></path>
              </svg>
            </button>
          </Avatar>
        ))}
      </div>
    </>
  );
};

export default Dropzone;