"use client";
import { Fragment, useState } from "react";
import { Icon } from "@iconify/react";
import { Accept, useDropzone } from "react-dropzone";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import { CloudUpload } from "lucide-react";

interface FileWithPreview extends File {
  preview: string;
}

interface FileUploaderProps {
    onDrop: (files: FileWithPreview[]) => void;
    accept: Accept;
    maxSize: number;
    label: string;
    className?: string;
    isMultiple?: boolean;
}

const FileUploader = ({ onDrop, accept, maxSize, label, className = "", isMultiple = true }: FileUploaderProps) => {
    const [files, setFiles] = useState<FileWithPreview[]>([]);

    const { getRootProps, getInputProps } = useDropzone({
        accept,
        maxSize: maxSize * 1024 * 1024,
        onDrop: (acceptedFiles) => {
            const mappedFiles = acceptedFiles.map((file) => Object.assign(file));
            setFiles((prevFiles) => [...prevFiles, ...mappedFiles]);
            onDrop(mappedFiles);
        },
    });

    const renderFilePreview = (file: FileWithPreview) => {
      if (file.type.startsWith("image")) {
        return (
          <Image
            width={48}
            height={48}
            alt={file.name}
            src={URL.createObjectURL(file)}
            className=" rounded border p-0.5"
          />
        );
      } else {
        return <Icon icon="tabler:file-description" />;
      }
    };
  
    const handleRemoveFile = (file: FileWithPreview) => {
      const uploadedFiles = files;
      const filtered = uploadedFiles.filter((i) => i.name !== file.name);
      setFiles([...filtered]);
    };

    const handleRemoveAllFiles = () => {
        setFiles([]);
        onDrop([]);
    };
  
    const fileList = files.map((file) => (
      <div
        key={file.name}
        className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
      >
        <div className="flex gap-3 items-center">
          <div className="file-preview">{renderFilePreview(file)}</div>
          <div>
            <div className=" text-sm  text-card-foreground">{file.name}</div>
            <div className=" text-xs font-light text-muted-foreground">
              {Math.round(file.size / 100) / 10 > 1000 ? (
                <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
              ) : (
                <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
              )}
              {" kb"}
            </div>
          </div>
        </div>
  
        <Button
          size="icon"
          color="destructive"
          variant="outline"
          className=" border-none rounded-full"
          onClick={() => handleRemoveFile(file)}
        >
          <Icon icon="tabler:x" className=" h-5 w-5" />
        </Button>
      </div>
    ));
    
    return (
        <Fragment>
            <div {...getRootProps({ className: "dropzone" })} className={className}>
                <input {...getInputProps()} />
                <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
                <CloudUpload className="text-default-300 w-10 h-10" />
                <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
                    {/* Drop files here or click to upload. */}
                    Tarik file disini atau klik untuk upload. 
                </h4>
                <div className=" text-xs text-muted-foreground">
                    ( {label}
                    Ukuran maksimal {maxSize} MB.)
                </div>
                </div>
            </div>
            {files.length ? (
                <Fragment>
                    <div>{fileList}</div>
                    <div className=" flex justify-between gap-2">
                        <Button
                        color="destructive"
                        onClick={handleRemoveAllFiles}
                        >
                            Remove All
                        </Button>
                    </div>
                </Fragment>
            ) : null}
        </Fragment>
    );
}


export default FileUploader;