import { jsx as l, jsxs as m } from "react/jsx-runtime";
import { useState as y, useRef as v } from "react";
import o from "./index-DragAndDropFile.module.scss.js";
const k = ({
  onFileDrop: i
}) => {
  const [c, n] = y(!1), r = v(null), d = (e) => {
    e.preventDefault(), n(!0);
  }, g = (e) => {
    e.preventDefault(), n(!1);
  }, f = (e) => {
    e.preventDefault(), n(!1);
    const t = e.dataTransfer.files;
    t.length !== 0 && s(t[0]);
  }, p = () => {
    r.current && r.current.click();
  }, u = (e) => {
    const t = e.target.files;
    t && t.length > 0 && s(t[0]);
  }, s = (e) => {
    const t = new FileReader();
    t.onload = (a) => {
      if (a.target && a.target.result) {
        const D = a.target.result.toString(), h = {
          name: e.name,
          content: D
        };
        i(h);
      }
    }, e.type.includes("text") || e.type.includes("json") ? t.readAsText(e) : e.type.includes("image") && t.readAsDataURL(e);
  };
  return l("div", {
    className: `${o.dropzone} ${c ? o.dragging : ""}`,
    onDragOver: d,
    onDragLeave: g,
    onDrop: f,
    onClick: p,
    children: m("label", {
      children: ["Drag and drop files here", l("input", {
        type: "file",
        ref: r,
        style: {
          display: "none"
        },
        onChange: u
      })]
    })
  });
};
export {
  k as DragAndDropFile
};
