"use client";

import * as React from "react";
import { useState, useRef } from "react";
import { Input } from "./input";
import { cn } from "@/app/lib/utils";

interface DragAndDropProps {
  onDrop?: (files: FileList) => void;
  onDragOver?: (event: React.DragEvent<HTMLDivElement>) => void;
  onDragEnter?: (event: React.DragEvent<HTMLDivElement>) => void;
  onDragLeave?: (event: React.DragEvent<HTMLDivElement>) => void;
  onClick?: () => void;
  onFileChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  maxSize?: number;
  minSize?: number;
  onSizeError?: (error: string) => void;
  children?: React.ReactNode;
  className?: string;
  multiple?: boolean;
  accept?: string;
  onTypeError?: (error: string) => void;
  props?: React.HTMLProps<HTMLInputElement>;
}

export const DragAndDrop: React.FC<DragAndDropProps> = ({
  onDrop,
  onDragOver,
  onDragEnter,
  onDragLeave,
  onClick,
  onFileChange,
  maxSize,
  minSize,
  onSizeError,
  children,
  className,
  multiple = false,
  accept,
  onTypeError,
  props,
}) => {
  const [isDragging, setIsDragging] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    onDragOver && onDragOver(event);
  };

  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsDragging(true);
    onDragEnter && onDragEnter(event);
  };

  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
    setIsDragging(false);
    onDragLeave && onDragLeave(event);
  };

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsDragging(false);

    const files = event.dataTransfer.files;

    if (files.length === 0) {
      return;
    }

    const acceptedFiles: File[] = [];

    Array.from(files).forEach((file) => {
      const fileExtension = file.name.split(".").pop()?.toLowerCase();

      if (
        accept &&
        !accept
          .split(",")
          .map((type) => type.trim().replace(".", "").toLowerCase())
          .includes(fileExtension || "")
      ) {
        onTypeError && onTypeError(`File type not accepted: ${file.type}`);
        return;
      }

      if (minSize && file.size < minSize * 1024 * 1024) {
        onSizeError && onSizeError(`File size too small: ${file.name}`);
        return;
      }

      if (maxSize && file.size > maxSize * 1024 * 1024) {
        onSizeError && onSizeError(`File size too large: ${file.name}`);
        return;
      }

      acceptedFiles.push(file);
    });

    if (acceptedFiles.length > 0) {
      const dataTransfer = new DataTransfer();
      acceptedFiles.forEach((file) => dataTransfer.items.add(file));
      onDrop && onDrop(dataTransfer.files);
    }
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files) return;

    const acceptedFiles: File[] = [];

    Array.from(files).forEach((file) => {
      const fileExtension = file.name.split(".").pop()?.toLowerCase();

      if (
        accept &&
        !accept
          .split(",")
          .map((type) => type.trim().replace(".", "").toLowerCase())
          .includes(fileExtension || "")
      ) {
        onTypeError && onTypeError(`File type not accepted: ${file.type}`);
        return;
      }

      if (minSize && file.size < minSize * 1024 * 1024) {
        onSizeError && onSizeError(`File size too small: ${file.name}`);
        return;
      }

      if (maxSize && file.size > maxSize * 1024 * 1024) {
        onSizeError && onSizeError(`File size too large: ${file.name}`);
        return;
      }

      acceptedFiles.push(file);
    });

    if (acceptedFiles.length > 0) {
      const dataTransfer = new DataTransfer();
      acceptedFiles.forEach((file) => dataTransfer.items.add(file));

      const newEvent = {
        ...event,
        target: {
          ...event.target,
          files: dataTransfer.files,
        },
      };

      onFileChange &&
        onFileChange(newEvent as React.ChangeEvent<HTMLInputElement>);

      event.target.value = "";
    }
  };

  const handleDivClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
    onClick && onClick();
  };

  return (
    <div
      className={cn(
        "px-12 py-6 border border-dashed border-grayscale-border rounded-3xl cursor-pointer",
        isDragging ? "bg-grayscale-surface-hover" : "bg-transparent",
        className
      )}
      onDragOver={handleDragOver}
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
      onClick={handleDivClick}
      {...props}
    >
      {children}
      <Input
        type="file"
        ref={fileInputRef}
        style={{ display: "none" }}
        onChange={handleFileChange}
        multiple={multiple}
        accept={accept}
      />
    </div>
  );
};
Components

Upload a file

Drag and drop a file here or, browse
