"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 msg={"Drop the files here ..."} />
        ) : (
          <DropImage />
        )}
      </div>
      {/* preview */}
      <Preview images={images} setImages={setImages} />
    </>
  );
};

const DropImage: FC = ({ message }: any) => {
  return (
    <div className="flex w-full items-center justify-center">
      <Label
        htmlFor="dropzone-file"
        className="dark:hover:bg-bray-800 flex h-40 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 h-2 flex-col items-center justify-center pb-6 pt-5">
          <svg
            className="mb-4 h-8 w-8 text-gray-500 dark:text-gray-400"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 20 16"
          >
            <path
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
            />
          </svg>
          <p className="text-green-500">{message}</p> :
          <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>
  );
};

const Preview: FC = (props: any) => {
  const removeImage = (image_name: string) => {
    props.setImages((images: any) =>
      images.filter((image: any) => image.name !== image_name),
    );
  };
  return (
    <>
      <div className="ml-2 mt-3 flex flex-wrap gap-2">
        {props.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;