import { $, useSignal } from '@builder.io/qwik';

export const useDropzone = () => {
  const highlight = useSignal(false);

  const onInputChange = $(async (e: Event) => {
    e.preventDefault();
  });

  const fileInputRef = useSignal<HTMLInputElement | undefined>(undefined);

  return {
    highlight,
    onDragOver: $((e: DragEvent) => {
      e.preventDefault();
      highlight.value = true;
    }),
    onDragLeave: $((e: DragEvent) => {
      e.preventDefault();
      highlight.value = false;
    }),
    onInputChange,
    triggerFileInput: $(() => {
      fileInputRef.value?.click();
    }),
    fileInputRef,
  };
}