"use client";

import { useUploadThing } from "@/utils/uploadthing";
import { File, X } from "lucide-react";
import { useState } from "react";
import { useDropzone } from "react-dropzone";

export default function Uploader() {
  const [files, setFiles] = useState<File[]>([]);
  const [previews, setPreviews] = useState<Array<string>>([]);

  const [progress, setProgress] = useState<number>(0);

  const onDrop = (_files: File[]) => {
    setFiles([...(files || []), ..._files]);
    setPreviews([
      ...(previews || []),
      ..._files.map((file) => URL.createObjectURL(file)),
    ]);
  };

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: {
      "image/*": [],
    },
  });

  const { startUpload, isUploading } = useUploadThing("imageUploader", {
    onUploadProgress(p) {
      setProgress(p);
    },
  });

  const handleUpload = () => startUpload(files);

  return (
    <div className="mx-auto w-full max-w-[1200px]">
      <h3 className="mt-12 text-xl font-medium">Simple File Uploader Test</h3>
      <div
        {...getRootProps()}
        className="w-full rounded-md border border-dashed h-96 mt-12 flex items-center flex-col justify-center"
      >
        <input {...getInputProps()} />
        <File className="w-7 h-7" />
        <h3 className="text-lg font-medium mt-2">Upload files</h3>
      </div>
      <div className="mt-5 flex flex-wrap gap-5">
        {previews.map((preview, i) => (
          <div className="relative" key={i}>
            <img
              src={preview}
              className="w-52 h-52 object-cover"
              onLoad={() => {
                URL.revokeObjectURL(preview);
              }}
            />
          </div>
        ))}
      </div>

      <button disabled={isUploading} className="mt-5" onClick={handleUpload}>
        Upload
      </button>

      <div className="w-full h-[4px] rounded-full bg-white mt-4">
        <div
          className="bg-blue-400 h-full rounded-full"
          style={{ width: `${progress}%` }}
        ></div>
      </div>
      {isUploading ? <p>{progress}%</p> : null}
    </div>
  );
}