// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useState, type CSSProperties, type ReactNode } from "react";
import { useDropzone, type DropzoneOptions } from "./_ynrlib/dropzone.js";
export type DropzoneProps = DropzoneOptions & {
  className?: string;
  style?: CSSProperties;
  label?: string;
  children?: ReactNode;
};
export function Dropzone({
  className = "",
  style,
  label = "Choose files or drop them here",
  children,
  onDrop,
  disabled,
  ...options
}: DropzoneProps) {
  const [files, setFiles] = useState<File[]>([]);
  const [errors, setErrors] = useState<string[]>([]);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    ...options,
    disabled,
    onDrop: (accepted, rejected, event) => {
      if (accepted.length) setFiles(accepted);
      setErrors(
        rejected.flatMap((file) =>
          file.errors.map((error) => `${file.file.name}: ${error.message}`),
        ),
      );
      onDrop?.(accepted, rejected, event);
    },
  });
  return (
    <div className={`ynr-dropzone ${className}`} style={style}>
      <div
        {...getRootProps({
          role: "button",
          "aria-label": label,
          "aria-disabled": disabled,
          "data-dragging": isDragActive,
        })}
      >
        <input {...getInputProps({ "aria-label": label })} />
        {children ?? (
          <>
            <strong>{label}</strong>
            <small>
              {options.accept
                ? Object.keys(options.accept).join(", ")
                : "All file types"}
              {options.maxSize ? ` · Up to ${options.maxSize} bytes` : ""}
            </small>
          </>
        )}
      </div>
      {files.length > 0 && (
        <ul aria-label="Selected files">
          {files.map((file, i) => (
            <li key={`${file.name}-${i}`}>
              {file.name} · {file.size} bytes
            </li>
          ))}
        </ul>
      )}
      <div role="status">
        {errors.map((error, i) => (
          <p key={i}>{error}</p>
        ))}
      </div>
    </div>
  );
}